Simboli HTML e CSS. Come inserirli nei contenuti.

Utilizzando linguaggi html e css posiamo facilmente inserire nei nostri testi dei simboli o icone speciali senza ricorrere alle installazione sul nostro sito di varie font esterni.

Per inserire un simbolo su una pagina web, è necessario specificare il codice HTML o rispettivo codice del simbolo come valore CSS .

I caratteri speciali sono sensibili al registro cio è alle lettere maiuscole o minuscole, quindi nel loro inserimento devi scrivere esattamente come indicato nella tabella in fondo del articolo, per esempio, perché abbiamo riportato solo una parte di questi icone.

Per inserirle nel codice html  basta ricopiare o digitare il rispettivo codice della icona come un testo normale senza inserimento di altri elementi e per utilizzare le icone nel tuo foglio di stile dovrai usare la proprietà content dei CSS e come valore fra le virgolette indicare il codice della icona voluta

.icona_mia{
content:"⚓ "
};

e per posizionarla prima o dopo usare pseudo classe:before e :after

.icona_mia:before {
content:"⚓ "
color:red;
};

Caratteri speciali ereditano colore dal colore dell'elemento genitore. Per cambiare colore di un carattere speciale puoi inserire nel codice nel HTML tag <span> e al interno del esso inserire lo stile per la icona

<p>La nostra frase<span style="color:red">&#9875</span> e le parole che seguono icona rossa</p>

La nostra frase e le parole che seguono la nostra ancora rossa

o impostare il valore desiderato del colore (quando si inserisce caratteri speciali attraverso la proprietà content dei CSS).come illustrato nel esempio sopra
ora vediamo delle icone

Punteggiatura
Aspetto HTML-codice CSS-codice Descrizione
&nbsp; \00A0 spazio unificatore
­ &shy; \00AD x
< &lt; \003C Segno meno
> &gt; \003E Segno piu
« &laquo; \00AB appici sinistra
» &raquo; \00BB appici destra
&lsaquo; \2039 virgoletta sinistra
&rsaquo; \203A virgoletta destra
" &quot; \0022  
&prime; \2032  
&Prime; \2033  
&lsquo; \2018  
&rsquo; \2019  
&sbquo; \201A  
&ldquo; \201C  
&rdquo; \201D  
&bdquo; \201E  
&#10076; \275C  
&#10075; \275B  
& &amp; \0026  
' &apos; \0027  
§ &sect; \00A7  
© &copy; \00A9 copyright
¬ &not; \00AC  
® &reg; \00AE  
¯ &macr; \00AF  
° &deg; \00B0  
± &plusmn; \00B1  
¹ &sup1; \00B9 "1"
² &sup2; \00B2 "2"
³ &sup3; \00B3 "3"
¼ &frac14; \00BC  
½ &frac12; \00BD  
¾ &frac34; \00BE  
´ &acute; \00B4  
µ &micro; \00B5  
&para; \00B6  
· &middot; \00B7  
¿ &iquest; \00BF  
ƒ &fnof; \0192  
&trade; \2122  
&bull; \2022  
&hellip; \2026  
&oline; \203E  
&ndash; \2013  
&mdash; \2014  
&permil; \2030  
} &#125; \007D  
{ &#123; \007B  
= &#61; \003D  
&ne; \2260  
&cong; \2245  
&asymp; \2248  
&le; \2264  
&ge; \2265  
&ang; \2220  
&perp; \22A5  
&radic; \221A  
&sum; \2211  
&int; \222B  
&#8251; \203B  
÷ &divide; \00F7  
&infin; \221E  
@ &#64; \0040  
[ &#91; \005B  
] &#93; \005D  
Frecce
Aspetto HTML-codice CSS-codice Descrizione
&larr; \2190  
&uarr; \2191  
&rarr; \2192  
&darr; \2193  
&harr; \2194  
&crarr; \21B5  
&lArr; \21D0  
&uArr; \21D1  
&rArr; \21D2  
&dArr; \21D3  
&hArr; \21D4  
&#10144; \27A0  
&#10148; \27A4  
&#10149; \27A5  
&#10150; \27A6  
&#10163; \27B3  
&#8634; \21BA  
&#8635; \21BB  
&#8679; \21E7  
&#8617; \21A9  
&#10155; \27AB  
&#11015; \2B07  
&#11014; \2B06  

 

Letto 1146 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso