Bootstrap 3 Glyphicons CDN

82

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.

Ionică Bizău
źródło
1
Pliki css Boostrap CDN z motywem Bootswatch nie zawierają glifów, mam rację? Plik: netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/…
trante

Odpowiedzi:

155

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.

edsioufi
źródło
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
@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
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
1
Dziękuję bardzo. Właśnie widziałem, że .iconnie jest już używany.
Ionică Bizău
i nie używaj czcionek z wersji niestandardowej, dopóki problem nie zostanie rozwiązany: github.com/twbs/bootstrap/issues/9925
OZ_
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
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,
2

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";}

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");
Zanurzyć
źródło