Problemy z używaniem czcionek ikon z CSS

Jestem nowicjuszem w projektowaniu i tworzeniu stron internetowych i bawiłem się różnymi technikami stylizacji. W trakcie moich badań natrafiłem na ikony czcionek. Chociaż badałem wiele samouczków i filmów, nie udało mi się z powodzeniem korzystać z czcionek ikon pomimo wielu godzin wysiłku.Problemy z używaniem czcionek ikon z CSS

Na początek poszedłem do witryny oferującej dużą liczbę czcionek ikon, wybrałem te, które mi się podobały, wygenerowałem je i ostatecznie pobrałem do folderu. Ale teraz, gdy te ikony są w folderze, co powinienem zrobić?

Źródło

2012-10-29 Wil Prim

Używaj go tylko jak normalny Czcionka: http://www.font-face.com dowiedzieć się, który znak, który odpowiada ikona chcesz używać (Spróbuj Book Font Viewer/Character) – FeifanZ

http: // inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3/ Dla tego, co jest warte, polecam od tego. Kiedy używasz czcionki z ikonami, masz za sobą bardzo prawdziwy tekst. Jeśli nie jest tekstem, nie powinien używać czcionki. Zawsze są sprite, obrazy wektorowe itp. – Brad

dzięki za komentarze. Inspire48, działa, ale czy zadziała, nawet jeśli użytkownik nie ma zainstalowanej czcionki? i Brad, zajrzę się tymi podziękowaniami –

Oto krok po kroku:

idź do Font Squirrel i pobrać zestaw @font-face. Rozpakuj go, zmień jego nazwę na "czcionki" i umieść go w tym samym katalogu, co plik html.

używać tego jako plik HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
    @font-face { 
    font-family: 'ModernPictogramsNormal'; 
    src: url('fonts/modernpics-webfont.eot'); 
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/modernpics-webfont.woff') format('woff'), 
     url('fonts/modernpics-webfont.ttf') format('truetype'), 
     url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
    } 
    li { 
     list-style-type: none; 
    } 
    [data-icon]:before { 
     font-family: 'ModernPictogramsNormal'; 
     content: attr(data-icon); 
     speak: none; 
     padding:0 5px; 
    } 
    </style> 
</head> 
<body> 
    <ul> 
    <li data-icon="^">RSS</li> 
    <li data-icon="*">Star</li> 
    <li data-icon=".">Shopping Cart</li> 
    </ul> 
</body> 
</html>

Powinieneś zobaczyć:

Icon Font Example

Ty toczenia!

Dodatkowo, aby dowiedzieć się, jakiego bohatera użyć, sprawdź mapę postaci na stronie Wiewiórki.

Źródło

2012-10-29 22:09:26 bookcasey

Awesome! Więc po prostu dla większej wiedzy, dlaczego jest tak wiele url() w @ font-face? Czy są to linki do wszystkich swoich czcionek? lub różne formaty? –

Różne przeglądarki wymagają/są w stanie używać różnych rodzajów plików czcionek (wiem, że .eot jest dla IE, .svg dla iOS, itp.). Najlepiej włączyć je wszystkie. – bookcasey

Jak rozpoznać, która właściwość 'data-icon' jest dla której symbolu, podczas gdy ja mam tylko pliki z pewnym atrybutem' unicode' i pewną wartością przeciw 'd'. Nie jestem w stanie tego zrozumieć? – Ammar

Problemy z używaniem czcionek ikon z CSS

Odpowiedz

Powiązane problemy