Bootstrap 3 Glyphicons CDN

Question 1

ZWRÓĆ UWAGĘ!

Ikony Bootstrap powracają po scaleniu żądania ściągnięcia .

Po kilku tygodniach poruszania się w tę iz powrotem, zdecydowałem się przywrócić czcionkę ikony Glyphicons do głównego repozytorium . Biorąc pod uwagę, jak powszechne są ikony w interfejsach użytkownika, prawdopodobnie szkoda dla większości ludzi nie umieszczanie ich (lub jakiejś innej czcionki ikon) w tym samym miejscu co CSS i JS.

Ta aktualizacja zawiera następujące elementy:

Przywraca dokumentację (na stronie Składniki)

Nowe zmienne @icon-font-pathi @icon-font-namedla elastyczności w dodawaniu i usuwaniu czcionek ikon

Uaktualnienia do najnowszych glifów (dodanie 40 nowych ikon)

Usuwa starą wzmiankę o Glyphicons ze strony CSS

Będziemy pracować nad ulepszeniem dostosowywania czcionek ikon w przyszłości, aby wymiana bibliotek czcionek była łatwiejsza (co było całą motywacją do pierwotnego usunięcia).

Jaki jest adres URL CDN nowej wersji aplikacji Twitter Bootstrap Glyphicons?

Z Bootstrap 3 zostały przeniesione do osobnego repozytorium , ale nie znalazłem żadnego CDN.

Z oficjalnej dokumentacji:

Wraz z uruchomieniem Bootstrap 3 ikony zostały przeniesione do osobnego repozytorium. Dzięki temu główny projekt jest tak oszczędny, jak to tylko możliwe, ułatwia ludziom wymianę bibliotek ikon i sprawia, że czcionki ikon Glyphicons są łatwiej dostępne dla większej liczby osób spoza Bootstrap.

Na oficjalnej stronie internetowej nie podają adresu URL CDN dla ikon.

Gdzie to znaleźć? Nie chcę pobierać repozytorium i umieszczać go w moim projekcie.

Question 2

Wraz z niedawnym wydaniem bootstrap 3 i scalaniem glifów z powrotem do głównego repozytorium Bootstrap , Bootstrap CDN obsługuje teraz kompletny css Bootstrap 3.0, w tym Glyphicons . Dokumentacja Bootstrap css to wszystko, co musisz uwzględnić: glify i ich zależności znajdują się na ścieżkach względnych w witrynie CDN i są przywoływane w bootstrap.min.css.

W html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

W css:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Oto działające demo .

Zauważ, że musisz używać .glyphiconklas zamiast .icon:

Przykład:

<span class="glyphicon glyphicon-heart"></span>

Zauważ również, że nadal musisz uwzględnić w bootstrap.min.jscelu korzystania z komponentów Bootstrap JavaScript, zobacz Bootstrap CDN dla adresu URL.

Jeśli chcesz używać Glyphicons oddzielnie , możesz to zrobić, bezpośrednio odwołując się do css Glyphicons w Bootstrap CDN .

W html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

W css:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

Ponieważ cssplik zawiera już wszystkie potrzebne zależności Glyphicons (które znajdują się w ścieżce względnej w witrynie Bootstrap CDN), dodanie csspliku jest wszystkim, co trzeba zrobić, aby rozpocząć korzystanie z Glyphicons.

Oto działające demo Glyphiconów bez Bootstrapa.

Question 3

Alternatywą byłoby użycie Font-Awesome dla ikon:

W tym Font-Awesome

Otwórz Font-Awesome na CDNJS i skopiuj URL CSS najnowszej wersji:

<link rel="stylesheet" href="<url>">

Lub w CSS

@import url("<url>");

Na przykład (uwaga, wersja ulegnie zmianie):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Stosowanie:

<i class="fa fa-bed"></i>

Zawiera wiele ikon !

Question 4

Chociaż Bootstrap CDN przywrócił glify do bootstrap.min.css, pliki css Bootstrap CDN w programie Bootswatch nie zawierają glifów.

Na przykład motyw Amelia: http://bootswatch.com/amelia/

Domyślnie Amelia ma glify w tym pliku: http://bootswatch.com/amelia/bootstrap.min.css

Ale plik css Bootstrap CDN nie zawiera glifów: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Tak więc, jak wspomniał @edsioufi, powinieneś dołączyć glphicons css, jeśli używasz plików Bootswatch z CDN bootstrap. Plik: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

Question 5

Jeśli chcesz mieć tylko ikony glifów bez dodatkowego css, możesz utworzyć plik css i umieścić poniższy kod i dołączyć go do głównego pliku css.

Muszę utworzyć ten dodatkowy plik, ponieważ poniższy link również zakłócał styl mojej witryny.

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

Zamiast używać go bezpośrednio, utworzyłem plik css bootstrap-glyphicons.css

@font-face{font-family:'Glyphicons Halflings';src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-envelope:before{content:"\2709";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}

Rozwiń fragment

Zaimportowałem utworzony plik css do mojego głównego pliku css, dzięki czemu mogę po prostu zaimportować tylko glify. Mam nadzieję, że to pomoże

@import url("bootstrap-glyphicons.css");

Answer 1

ZWRÓĆ UWAGĘ!

Ikony Bootstrap powracają po scaleniu żądania ściągnięcia .

Po kilku tygodniach poruszania się w tę iz powrotem, zdecydowałem się przywrócić czcionkę ikony Glyphicons do głównego repozytorium . Biorąc pod uwagę, jak powszechne są ikony w interfejsach użytkownika, prawdopodobnie szkoda dla większości ludzi nie umieszczanie ich (lub jakiejś innej czcionki ikon) w tym samym miejscu co CSS i JS.

Ta aktualizacja zawiera następujące elementy:

Przywraca dokumentację (na stronie Składniki)

Nowe zmienne @icon-font-pathi @icon-font-namedla elastyczności w dodawaniu i usuwaniu czcionek ikon

Uaktualnienia do najnowszych glifów (dodanie 40 nowych ikon)

Usuwa starą wzmiankę o Glyphicons ze strony CSS

Będziemy pracować nad ulepszeniem dostosowywania czcionek ikon w przyszłości, aby wymiana bibliotek czcionek była łatwiejsza (co było całą motywacją do pierwotnego usunięcia).

Jaki jest adres URL CDN nowej wersji aplikacji Twitter Bootstrap Glyphicons?

Z Bootstrap 3 zostały przeniesione do osobnego repozytorium , ale nie znalazłem żadnego CDN.

Z oficjalnej dokumentacji:

Wraz z uruchomieniem Bootstrap 3 ikony zostały przeniesione do osobnego repozytorium. Dzięki temu główny projekt jest tak oszczędny, jak to tylko możliwe, ułatwia ludziom wymianę bibliotek ikon i sprawia, że czcionki ikon Glyphicons są łatwiej dostępne dla większej liczby osób spoza Bootstrap.

Na oficjalnej stronie internetowej nie podają adresu URL CDN dla ikon.

Gdzie to znaleźć? Nie chcę pobierać repozytorium i umieszczać go w moim projekcie.

Answer 2

1

Pliki css Boostrap CDN z motywem Bootswatch nie zawierają glifów, mam rację? Plik: netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/…

trante

Answer 3

Wraz z niedawnym wydaniem bootstrap 3 i scalaniem glifów z powrotem do głównego repozytorium Bootstrap , Bootstrap CDN obsługuje teraz kompletny css Bootstrap 3.0, w tym Glyphicons . Dokumentacja Bootstrap css to wszystko, co musisz uwzględnić: glify i ich zależności znajdują się na ścieżkach względnych w witrynie CDN i są przywoływane w bootstrap.min.css.

W html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

W css:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Oto działające demo .

Zauważ, że musisz używać .glyphiconklas zamiast .icon:

Przykład:

<span class="glyphicon glyphicon-heart"></span>

Zauważ również, że nadal musisz uwzględnić w bootstrap.min.jscelu korzystania z komponentów Bootstrap JavaScript, zobacz Bootstrap CDN dla adresu URL.

Jeśli chcesz używać Glyphicons oddzielnie , możesz to zrobić, bezpośrednio odwołując się do css Glyphicons w Bootstrap CDN .

W html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

W css:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

Ponieważ cssplik zawiera już wszystkie potrzebne zależności Glyphicons (które znajdują się w ścieżce względnej w witrynie Bootstrap CDN), dodanie csspliku jest wszystkim, co trzeba zrobić, aby rozpocząć korzystanie z Glyphicons.

Oto działające demo Glyphiconów bez Bootstrapa.

Answer 4

Hmm interesujące. Wydaje się, że to poprawna odpowiedź, ale ikony nie pojawiają się podczas przełączania na ten adres URL. Fantastyczna czcionka działa dobrze. Wczytuje się plik CSS z regułami ikon. Czy potrzebuję czegoś więcej? Obrazy?

Ionică Bizău

Answer 5

@John ツ Pierwszą klasą w pliku CSS jest klasa @ font-face, która importuje wszystkie potrzebne pliki czcionek (w tym jeden svgplik obrazu), które znajdują się w ścieżce względnej w witrynie Bootstrap CDN . Więc nie potrzebujesz niczego więcej.

edsioufi

Answer 6

Dzięki za demo. Przyjrzę się później i przyjmuję tę odpowiedź, ponieważ wkrótce moja aplikacja zadziała. Edytuj swoją odpowiedź i dodaj treść z komentarzy do id. Dzięki!

Ionică Bizău

Answer 7

1

Dziękuję bardzo. Właśnie widziałem, że .iconnie jest już używany.

Ionică Bizău

Answer 8

i nie używaj czcionek z wersji niestandardowej, dopóki problem nie zostanie rozwiązany: github.com/twbs/bootstrap/issues/9925

OZ_

Answer 9

27

Alternatywą byłoby użycie Font-Awesome dla ikon:

W tym Font-Awesome

Otwórz Font-Awesome na CDNJS i skopiuj URL CSS najnowszej wersji:

<link rel="stylesheet" href="<url>">

Lub w CSS

@import url("<url>");

Na przykład (uwaga, wersja ulegnie zmianie):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Stosowanie:

<i class="fa fa-bed"></i>

Zawiera wiele ikon !

Ionică Bizău
źródło

Po wielu godzinach prób, aby ikony działały, połączenie z niesamowitym fontem cdn rozwiązało mój problem. Dzięki.

Eenvincible,

@Eenvincible Nie zapomnij użyć najnowszej wersji . Linki z mojej odpowiedzi są trochę nieaktualne.

Ionică Bizău,

Adres URL został zmieniony:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

nimrod

A plik z niesamowitymi czcionkami zawiera znacznie więcej ikon. Miły.

dudewad

Pomijanie glifów bootstrapa, ale poleganie na fa zamiast tego spowoduje problemy dla bibliotek, które zależą od bootstrapa. Np. Angular-ui-select pominie niektóre ikony

Robin-Hoodie

Answer 10

Po wielu godzinach prób, aby ikony działały, połączenie z niesamowitym fontem cdn rozwiązało mój problem. Dzięki.

Eenvincible,

Answer 11

@Eenvincible Nie zapomnij użyć najnowszej wersji . Linki z mojej odpowiedzi są trochę nieaktualne.

Ionică Bizău,

Answer 12

Adres URL został zmieniony:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

nimrod

Answer 13

A plik z niesamowitymi czcionkami zawiera znacznie więcej ikon. Miły.

dudewad

Answer 14

Pomijanie glifów bootstrapa, ale poleganie na fa zamiast tego spowoduje problemy dla bibliotek, które zależą od bootstrapa. Np. Angular-ui-select pominie niektóre ikony

Robin-Hoodie

Answer 15

3

Chociaż Bootstrap CDN przywrócił glify do bootstrap.min.css, pliki css Bootstrap CDN w programie Bootswatch nie zawierają glifów.

Na przykład motyw Amelia: http://bootswatch.com/amelia/

Domyślnie Amelia ma glify w tym pliku: http://bootswatch.com/amelia/bootstrap.min.css

Ale plik css Bootstrap CDN nie zawiera glifów: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Tak więc, jak wspomniał @edsioufi, powinieneś dołączyć glphicons css, jeśli używasz plików Bootswatch z CDN bootstrap. Plik: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

trante
źródło

Również moduł dostosowujący w bootstrap czasami generuje nieprawidłowe pliki czcionek. Oddzielne pobranie plików czcionek pomogło mi odzyskać ikony. Czasami jest to błąd pakietu bootstrap.

Clain Dsilva

trante: Twoje informacje są nieprawidłowe. Jeśli sprawdzisz linki, zobaczysz, że Bootstrap CDN dla motywu (ów) bootwatch zawiera glify.

Michael Moriarty,

Answer 16

Również moduł dostosowujący w bootstrap czasami generuje nieprawidłowe pliki czcionek. Oddzielne pobranie plików czcionek pomogło mi odzyskać ikony. Czasami jest to błąd pakietu bootstrap.

Clain Dsilva

Answer 17

trante: Twoje informacje są nieprawidłowe. Jeśli sprawdzisz linki, zobaczysz, że Bootstrap CDN dla motywu (ów) bootwatch zawiera glify.

Michael Moriarty,

Answer 18

Jeśli chcesz mieć tylko ikony glifów bez dodatkowego css, możesz utworzyć plik css i umieścić poniższy kod i dołączyć go do głównego pliku css.

Muszę utworzyć ten dodatkowy plik, ponieważ poniższy link również zakłócał styl mojej witryny.

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

Zamiast używać go bezpośrednio, utworzyłem plik css bootstrap-glyphicons.css

@font-face{font-family:'Glyphicons Halflings';src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');src:url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"\2a";}
.glyphicon-plus:before{content:"\2b";}
.glyphicon-euro:before{content:"\20ac";}
.glyphicon-minus:before{content:"\2212";}
.glyphicon-cloud:before{content:"\2601";}
.glyphicon-envelope:before{content:"\2709";}
.glyphicon-pencil:before{content:"\270f";}
.glyphicon-glass:before{content:"\e001";}
.glyphicon-music:before{content:"\e002";}
.glyphicon-search:before{content:"\e003";}
.glyphicon-heart:before{content:"\e005";}
.glyphicon-star:before{content:"\e006";}
.glyphicon-star-empty:before{content:"\e007";}
.glyphicon-user:before{content:"\e008";}
.glyphicon-film:before{content:"\e009";}
.glyphicon-th-large:before{content:"\e010";}
.glyphicon-th:before{content:"\e011";}
.glyphicon-th-list:before{content:"\e012";}
.glyphicon-ok:before{content:"\e013";}
.glyphicon-remove:before{content:"\e014";}
.glyphicon-zoom-in:before{content:"\e015";}
.glyphicon-zoom-out:before{content:"\e016";}
.glyphicon-off:before{content:"\e017";}
.glyphicon-signal:before{content:"\e018";}
.glyphicon-cog:before{content:"\e019";}
.glyphicon-trash:before{content:"\e020";}
.glyphicon-home:before{content:"\e021";}
.glyphicon-file:before{content:"\e022";}
.glyphicon-time:before{content:"\e023";}
.glyphicon-road:before{content:"\e024";}
.glyphicon-download-alt:before{content:"\e025";}
.glyphicon-download:before{content:"\e026";}
.glyphicon-upload:before{content:"\e027";}
.glyphicon-inbox:before{content:"\e028";}
.glyphicon-play-circle:before{content:"\e029";}
.glyphicon-repeat:before{content:"\e030";}
.glyphicon-refresh:before{content:"\e031";}
.glyphicon-list-alt:before{content:"\e032";}
.glyphicon-flag:before{content:"\e034";}
.glyphicon-headphones:before{content:"\e035";}
.glyphicon-volume-off:before{content:"\e036";}
.glyphicon-volume-down:before{content:"\e037";}
.glyphicon-volume-up:before{content:"\e038";}
.glyphicon-qrcode:before{content:"\e039";}
.glyphicon-barcode:before{content:"\e040";}
.glyphicon-tag:before{content:"\e041";}
.glyphicon-tags:before{content:"\e042";}
.glyphicon-book:before{content:"\e043";}
.glyphicon-print:before{content:"\e045";}
.glyphicon-font:before{content:"\e047";}
.glyphicon-bold:before{content:"\e048";}
.glyphicon-italic:before{content:"\e049";}
.glyphicon-text-height:before{content:"\e050";}
.glyphicon-text-width:before{content:"\e051";}
.glyphicon-align-left:before{content:"\e052";}
.glyphicon-align-center:before{content:"\e053";}
.glyphicon-align-right:before{content:"\e054";}
.glyphicon-align-justify:before{content:"\e055";}
.glyphicon-list:before{content:"\e056";}
.glyphicon-indent-left:before{content:"\e057";}
.glyphicon-indent-right:before{content:"\e058";}
.glyphicon-facetime-video:before{content:"\e059";}
.glyphicon-picture:before{content:"\e060";}
.glyphicon-map-marker:before{content:"\e062";}
.glyphicon-adjust:before{content:"\e063";}
.glyphicon-tint:before{content:"\e064";}
.glyphicon-edit:before{content:"\e065";}
.glyphicon-share:before{content:"\e066";}
.glyphicon-check:before{content:"\e067";}
.glyphicon-move:before{content:"\e068";}
.glyphicon-step-backward:before{content:"\e069";}
.glyphicon-fast-backward:before{content:"\e070";}
.glyphicon-backward:before{content:"\e071";}
.glyphicon-play:before{content:"\e072";}
.glyphicon-pause:before{content:"\e073";}
.glyphicon-stop:before{content:"\e074";}
.glyphicon-forward:before{content:"\e075";}
.glyphicon-fast-forward:before{content:"\e076";}
.glyphicon-step-forward:before{content:"\e077";}
.glyphicon-eject:before{content:"\e078";}
.glyphicon-chevron-left:before{content:"\e079";}
.glyphicon-chevron-right:before{content:"\e080";}
.glyphicon-plus-sign:before{content:"\e081";}
.glyphicon-minus-sign:before{content:"\e082";}
.glyphicon-remove-sign:before{content:"\e083";}
.glyphicon-ok-sign:before{content:"\e084";}
.glyphicon-question-sign:before{content:"\e085";}
.glyphicon-info-sign:before{content:"\e086";}
.glyphicon-screenshot:before{content:"\e087";}
.glyphicon-remove-circle:before{content:"\e088";}
.glyphicon-ok-circle:before{content:"\e089";}
.glyphicon-ban-circle:before{content:"\e090";}
.glyphicon-arrow-left:before{content:"\e091";}
.glyphicon-arrow-right:before{content:"\e092";}
.glyphicon-arrow-up:before{content:"\e093";}
.glyphicon-arrow-down:before{content:"\e094";}
.glyphicon-share-alt:before{content:"\e095";}
.glyphicon-resize-full:before{content:"\e096";}
.glyphicon-resize-small:before{content:"\e097";}
.glyphicon-exclamation-sign:before{content:"\e101";}
.glyphicon-gift:before{content:"\e102";}
.glyphicon-leaf:before{content:"\e103";}
.glyphicon-eye-open:before{content:"\e105";}
.glyphicon-eye-close:before{content:"\e106";}
.glyphicon-warning-sign:before{content:"\e107";}
.glyphicon-plane:before{content:"\e108";}
.glyphicon-random:before{content:"\e110";}
.glyphicon-comment:before{content:"\e111";}
.glyphicon-magnet:before{content:"\e112";}
.glyphicon-chevron-up:before{content:"\e113";}
.glyphicon-chevron-down:before{content:"\e114";}
.glyphicon-retweet:before{content:"\e115";}
.glyphicon-shopping-cart:before{content:"\e116";}
.glyphicon-folder-close:before{content:"\e117";}
.glyphicon-folder-open:before{content:"\e118";}
.glyphicon-resize-vertical:before{content:"\e119";}
.glyphicon-resize-horizontal:before{content:"\e120";}
.glyphicon-hdd:before{content:"\e121";}
.glyphicon-bullhorn:before{content:"\e122";}
.glyphicon-certificate:before{content:"\e124";}
.glyphicon-thumbs-up:before{content:"\e125";}
.glyphicon-thumbs-down:before{content:"\e126";}
.glyphicon-hand-right:before{content:"\e127";}
.glyphicon-hand-left:before{content:"\e128";}
.glyphicon-hand-up:before{content:"\e129";}
.glyphicon-hand-down:before{content:"\e130";}
.glyphicon-circle-arrow-right:before{content:"\e131";}
.glyphicon-circle-arrow-left:before{content:"\e132";}
.glyphicon-circle-arrow-up:before{content:"\e133";}
.glyphicon-circle-arrow-down:before{content:"\e134";}
.glyphicon-globe:before{content:"\e135";}
.glyphicon-tasks:before{content:"\e137";}
.glyphicon-filter:before{content:"\e138";}
.glyphicon-fullscreen:before{content:"\e140";}
.glyphicon-dashboard:before{content:"\e141";}
.glyphicon-heart-empty:before{content:"\e143";}
.glyphicon-link:before{content:"\e144";}
.glyphicon-phone:before{content:"\e145";}
.glyphicon-usd:before{content:"\e148";}
.glyphicon-gbp:before{content:"\e149";}
.glyphicon-sort:before{content:"\e150";}
.glyphicon-sort-by-alphabet:before{content:"\e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"\e152";}
.glyphicon-sort-by-order:before{content:"\e153";}
.glyphicon-sort-by-order-alt:before{content:"\e154";}
.glyphicon-sort-by-attributes:before{content:"\e155";}
.glyphicon-sort-by-attributes-alt:before{content:"\e156";}
.glyphicon-unchecked:before{content:"\e157";}
.glyphicon-expand:before{content:"\e158";}
.glyphicon-collapse-down:before{content:"\e159";}
.glyphicon-collapse-up:before{content:"\e160";}
.glyphicon-log-in:before{content:"\e161";}
.glyphicon-flash:before{content:"\e162";}
.glyphicon-log-out:before{content:"\e163";}
.glyphicon-new-window:before{content:"\e164";}
.glyphicon-record:before{content:"\e165";}
.glyphicon-save:before{content:"\e166";}
.glyphicon-open:before{content:"\e167";}
.glyphicon-saved:before{content:"\e168";}
.glyphicon-import:before{content:"\e169";}
.glyphicon-export:before{content:"\e170";}
.glyphicon-send:before{content:"\e171";}
.glyphicon-floppy-disk:before{content:"\e172";}
.glyphicon-floppy-saved:before{content:"\e173";}
.glyphicon-floppy-remove:before{content:"\e174";}
.glyphicon-floppy-save:before{content:"\e175";}
.glyphicon-floppy-open:before{content:"\e176";}
.glyphicon-credit-card:before{content:"\e177";}
.glyphicon-transfer:before{content:"\e178";}
.glyphicon-cutlery:before{content:"\e179";}
.glyphicon-header:before{content:"\e180";}
.glyphicon-compressed:before{content:"\e181";}
.glyphicon-earphone:before{content:"\e182";}
.glyphicon-phone-alt:before{content:"\e183";}
.glyphicon-tower:before{content:"\e184";}
.glyphicon-stats:before{content:"\e185";}
.glyphicon-sd-video:before{content:"\e186";}
.glyphicon-hd-video:before{content:"\e187";}
.glyphicon-subtitles:before{content:"\e188";}
.glyphicon-sound-stereo:before{content:"\e189";}
.glyphicon-sound-dolby:before{content:"\e190";}
.glyphicon-sound-5-1:before{content:"\e191";}
.glyphicon-sound-6-1:before{content:"\e192";}
.glyphicon-sound-7-1:before{content:"\e193";}
.glyphicon-copyright-mark:before{content:"\e194";}
.glyphicon-registration-mark:before{content:"\e195";}
.glyphicon-cloud-download:before{content:"\e197";}
.glyphicon-cloud-upload:before{content:"\e198";}
.glyphicon-tree-conifer:before{content:"\e199";}
.glyphicon-tree-deciduous:before{content:"\e200";}
.glyphicon-briefcase:before{content:"\1f4bc";}
.glyphicon-calendar:before{content:"\1f4c5";}
.glyphicon-pushpin:before{content:"\1f4cc";}
.glyphicon-paperclip:before{content:"\1f4ce";}
.glyphicon-camera:before{content:"\1f4f7";}
.glyphicon-lock:before{content:"\1f512";}
.glyphicon-bell:before{content:"\1f514";}
.glyphicon-bookmark:before{content:"\1f516";}
.glyphicon-fire:before{content:"\1f525";}
.glyphicon-wrench:before{content:"\1f527";}

Rozwiń fragment

Zaimportowałem utworzony plik css do mojego głównego pliku css, dzięki czemu mogę po prostu zaimportować tylko glify. Mam nadzieję, że to pomoże

@import url("bootstrap-glyphicons.css");

Bootstrap 3 Glyphicons CDN

ZWRÓĆ UWAGĘ!

Odpowiedzi:

W tym Font-Awesome

Stosowanie: