Pytanie Bootstrap 3 Glyphicons CDN


ZWRÓĆ UWAGĘ!

Ikony Bootstrap powróciły po ta prośba o połączenie ciągnie.


Po tym, jak przez ostatnie kilka tygodni chodziłem tam iz powrotem, postanowiłem przywróć czcionkę ikony Glyphicons do głównego repozytorium. Biorąc pod uwagę, jak powszechne są ikony w interfejsach użytkownika, jest to prawdopodobnie nieużyteczność dla większości ludzi, aby nie uwzględniać ich (lub innych czcionek ikonowych) w tym samym miejscu co CSS i JS.

Ta aktualizacja zawiera następujące elementy:

  • Przywraca dokumentację (na stronie Komponenty)
  • Nowe zmienne, @icon-font-path i @icon-font-name, dla elastyczności w dodawaniu i usuwaniu czcionek ikon
  • Aktualizacja do najnowszych Glyphicons (dodanie 40 nowych ikon)
  • Usuwa stare Glifosy wymieniają ze strony CSS

Będziemy pracować nad udoskonaleniem personalizacji fontów ikon w przyszłości, więc zamiana bibliotek czcionek może być łatwiejsza (co było główną motywacją do pierwotnego usunięcia).


Jaki jest URL CDN nowej wersji Twittera Bootstrap Glyphicons?

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

Z oficjalnej dokumentacji:

Po uruchomieniu Bootstrap 3 ikony zostały przeniesione do osobnego repozytorium. Dzięki temu pierwotny projekt jest tak szczupły, jak to tylko możliwe, ułatwia wymianę plików bibliotek ikon i sprawia, że ​​czcionki ikon Glyphicons są łatwiej dostępne dla większej liczby osób spoza Bootstrap.

Na oficjalna strona internetowa nie udostępniają adresu URL CDN dla ikon.

Gdzie można go znaleźć? Nie chcę pobierać repozytorium i włączać go do mojego projektu.


76
2017-08-14 03:45


pochodzenie


Bootrap Pliki CDN z tematem Bootswatch css nie zawierają glifów, mam rację? Plik: netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/... - trante


Odpowiedzi:


Z najnowszymi wydanie bootstrap 3, a gliffony są łączone z powrotem do głównego repozytorium Bootstrap, Bootstrap CDN teraz służy kompletne Bootstrap 3.0 css, w tym Glyphicons. Odniesienie do css Bootstrap to wszystko, czego potrzebujesz: Glyphicons i jego zależności znajdują się na względnych ścieżkach na stronie CDN i są wymienione 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ła próbny.

Uwaga które musisz użyć .glyphicon klasy zamiast .icon:

Przykład:

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

Zwróć też uwagę które nadal będziesz musiał uwzględnić bootstrap.min.js do korzystania z komponentów Bootstrap JavaScript, patrz Bootstrap CDN dla adresu URL.


Jeśli chcesz korzystać z Glifów oddzielniemożesz to zrobić, odwołując się bezpośrednio do css Glifphonó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");

Od css plik zawiera już wszystkie potrzebne zależności Glyphicons (które znajdują się we względnej ścieżce na stronie Bootstrap CDN), dodając css plik jest wszystkim, co trzeba zrobić, aby zacząć używać Glifphonów.

Oto działa próbny Glifów bez Bootstrapa.


131
2017-08-14 07:17



Hmm interesujące. Wydaje się być poprawną odpowiedzią, ale ikony nie pojawiają się podczas przełączania na ten adres URL. Font awesome działa dobrze. Plik CSS z regułami ikon został załadowany. Czy potrzebuję czegoś więcej? Obrazy? - Ionică Bizău
Pracuje dla mnie. PRÓBNY - edsioufi
@John ツ Pierwszą klasą w pliku CSS jest klasa @ font-face, która importuje wszystkie potrzebne pliki czcionek (w tym jeden svg plik obrazu), które znajdują się w ścieżce względnej na Bootstrap CDN teren. Więc nie potrzebujesz niczego więcej. - edsioufi
Dzięki za wersję demonstracyjną. Przyjrzę się później i zaakceptuję tę odpowiedź wkrótce po aplikacji. Edytuj odpowiedź i dodaj treść z komentarzy do id. Dzięki! - Ionică Bizău
Dziękuję bardzo. Właśnie to widziałem .icon nie jest już używany. - Ionică Bizău


Alternatywą byłoby użyć Czcionka niesamowita dla ikon:

W tym Font-Awesome

otwarty Czcionka niesamowita na CDNJS i skopiuj adres URL CSS najnowszej wersji:

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

Lub w CSS

@import url("<url>");

Na przykład (zauważ, że wersja zmieni się):

<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!


27
2017-08-14 03:54



Po wielu godzinach próbowania uruchomienia ikon, połączenie z niesamowitym CDNem rozwiązało mój problem. Dzięki. - Eenvincible
@ Niezwyciężony Nie zapomnij użyć Najnowsza wersja. Linki z mojej odpowiedzi są nieco przestarzałe. - Ionică Bizău
W końcu udało mi się go uruchomić po użyciu cdn. - Eenvincible
URL został zmieniony: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> - nimrod
A niesamowity plik zawiera dużo więcej ikon. Miły. - dudewad


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

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

Domyślna 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łem @edsioufi, powinieneś dodać, że powinieneś dołączyć css, jeśli korzystasz z plików Bootswatch z CDN bootstrap. Plik: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css


2
2017-09-17 18:40



Również moduł dostosowujący podczas ładowania początkowego generuje niekiedy niepoprawne pliki czcionek. Oddzielne pobieranie plików czcionek pomogło mi odzyskać moje ikony. Czasami jest to błąd pakietu startowego. - Clain Dsilva
trante: twoje informacje są nieprawidłowe. Jeśli zaznaczysz swoje linki, zobaczysz, że Bootstrap CDN dla motywu (y) bootwatch zawiera gliffony. - Michael Moriarty