Problemi nell'uso dei caratteri icona con CSS

Sono un neofita del web design e dello sviluppo e ho giocato con diverse tecniche di styling. Durante il corso della mia ricerca, mi sono imbattuto nei font icon. Sebbene abbia studiato diversi tutorial e video, non sono riuscito a utilizzare correttamente i font di icone nonostante molte ore di lavoro.Problemi nell'uso dei caratteri icona con CSS

Per iniziare, sono andato a un sito che offre un numero elevato di font di icone, ha scelto quelli che mi piacevano, li ha generati e infine li ho scaricati in una cartella. Ma ora che questi caratteri di icona sono in una cartella, cosa dovrei fare?

fonte

2012-10-29 Wil Prim

usarlo solo come un carattere normale: http://www.font-face.com capire quale personaggio corrisponde a quale icona da utilizzare (Prova Libro Font/Character Viewer) – FeifanZ

http: // inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3/ Per quello che vale, lo consiglierei contro questo. Quando usi un font con icone, hai un testo molto reale dietro di esso. Se non è un testo, non dovrebbe usare un font. Ci sono sempre sprite, immagini vettoriali, ecc. – Brad

grazie per i commenti. inspire48, funziona ma funzionerà anche se l'utente non ha installato quel font? e Brad, vedrò quelli grazie –

Ecco una guida passo per passo:

Vai a Font Squirrel e scarica il kit @font-face. Decomprimilo, rinominalo in "caratteri" e inseriscilo nella stessa directory del tuo file html.

utilizzare questo come file 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>

Si dovrebbe vedere questo:

Icon Font Example

Stai a rotazione!

Inoltre, per sapere quale personaggio utilizzare, controlla la Mappa caratteri sul sito di Font Squirrel.

fonte

2012-10-29 22:09:26 bookcasey

Fantastico! Quindi, solo per una maggiore conoscenza, perché ci sono così tanti URL() in @ font-face? Sono quei collegamenti a tutti i loro caratteri? o diversi formati? –

Diversi browser richiedono/sono in grado di utilizzare diversi tipi di file di font (lo so. Eot è per IE, .svg è per iOS, ecc.). È meglio includerli tutti. – bookcasey

Come identificare quale proprietà 'data-icon' è per quale simbolo, mentre io ho solo i file con qualche attributo 'unicode' e qualche valore contro' d'. Non riesco a capirlo? – Ammar

Problemi nell'uso dei caratteri icona con CSS

risposta

Problemi correlati