fonts
Caratteri icona
Ricerca…
Compreso un carattere di icona su una pagina Web
Per includere un carattere di icona nel tuo CSS, puoi includere il seguente codice:
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
Utilizzo di un carattere di icona su una pagina Web
Per utilizzare un'icona nel tuo codice HTML, puoi procedere in uno dei seguenti modi:
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
Se si desidera optare per il metodo 7, è necessario un codice CSS aggiuntivo. Questo codice CSS assomiglia a questo:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
I font Icon come Iconic , Font Awesome o Glyphicons tipicamente usano tutti il metodo 7. Questo, per evitare di dover copiare e incollare caratteri speciali da un cheat sheet o essere costretti ad usare entità HTML.
È, tuttavia, un metodo che ha diversi aspetti negativi. Prima di tutto, richiede il supporto per :before selettore CSS e l'uso di una sequenza di escape per i caratteri UNICODE. Né IE6-7 né certe versioni di Webkit forniscono questo supporto.
Un altro svantaggio è che devi usare un tag HTML separato per ogni icona, con ogni tag corrispondente a un carattere dal carattere dell'icona. La visualizzazione di diverse icone all'interno del tag HTML non è possibile con il metodo 7, diversamente da altri metodi.
Altri metodi hanno i loro lati negativi, però. I metodi 1, 3 e 5 richiedono di copiare e incollare il carattere da un foglio cheat o utilizzare mezzi per inserire il carattere stesso nel codice. Il tuo editor di codice potrebbe non essere in grado di visualizzare il personaggio o potrebbe visualizzare un carattere diverso da quello nel tuo font di icona se il carattere dell'icona usa un mapping non standard di quel carattere.
I metodi 1, 3 e 5 richiedono inoltre che il browser utilizzi la codifica corretta per visualizzare il carattere corretto. Per i caratteri UNICODE, questo non è così ovvio come lo è per i caratteri ASCII. Ciò dovrebbe comunque essere garantito aggiungendo il meta-tag <meta charset="utf-8" /> da qualche parte nella head del tuo documento HTML.
I metodi 2, 4 e 6 non richiedono di copiare e incollare il carattere, tuttavia rendono il tuo codice meno leggibile dagli esseri umani e apporta modifiche al codice più inclini all'errore umano. Inoltre, poiché dovrai cercare il codice dell'entità HTML per ciascuna delle icone che desideri utilizzare o dovrai memorizzarle. Mentre lo stesso vale ovviamente anche per le classi utilizzate nel metodo 7, queste classi sono molto più facili da memorizzare rispetto a un codice di entità HTML.
Compreso un simbolo specifico su una pagina web
Considera un triangolo che punta verso il basso.
Esistono diversi modi corretti per visualizzare questo simbolo su una pagina Web.
Metodo 1: utilizzare l'entità HTML decimale
HTML:
▼
Metodo 2: utilizzare l'entità HTML esadecimale
HTML:
▼
Metodo 3: usa direttamente il carattere
HTML:
▼
Metodo 4: usa CSS
HTML:
<span class='icon-down'></span>
CSS:
.icon-down:before {
content: "\25BC";
}
Ognuno di questi tre metodi dovrebbe avere lo stesso risultato. Per altri simboli, esistono le stesse tre opzioni. Alcuni hanno anche una quarta opzione, che consente di utilizzare un riferimento basato su stringhe (ad es. ♥ per visualizzare ♥).
È possibile utilizzare un sito Web di riferimento come Unicode-table.com per trovare le icone supportate in UNICODE e con quali codici corrispondono. Ad esempio, trovi i valori per il triangolo rivolto verso il basso su http://unicode-table.com/it/25BC/ .
Si noti che questi metodi sono sufficienti solo per le icone disponibili per impostazione predefinita in ogni browser. Per simboli come ☃, ❄, ★, ☂, ☭, ⎗ o ⎘, questo è molto meno probabile che sia il caso. Mentre è possibile fornire il supporto per più browser per altri simboli UNICODE, è necessario ottenere un carattere di icona o crearne uno personalizzato. Vedi Creare il tuo font personale per maggiori informazioni su come creare il tuo font personale.
Caratteri di icone popolari
Di seguito è riportato un elenco di tipi di carattere icona famosi: