#Bootstrap Glyphicons e Font #Awesome

Migliaia di glifi gratuiti disponibili


Autore: Andrea Pacchiarotti
Ultimo aggiornamento: Marzo 2019
Categoria: Siti web Bootstrap glyphicons e Font awesome

Bootstrap glyphicons e Font Awesome
#Bootstrap Glyphicons e Font #Awesome

Sommario Bootstrap glyphicons e Font awesome

Bootstrap Glyphicons

Negli antichi sistemi di scrittura geroglifica, un glifo è un'immagine stilizzata, associata a un significato. La seguente raccolta comprende oltre 250 glifi in formato di font.

Per inserire un bootstrap glyphicons è necessario scaricare la libreria da https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css, ma se si vuole evitare un richiamo esterno e il caricamento di un codice smisurato, si può estrarre solo quanto necessario richiamando in un foglio di stile, ad esempio interno, la seguente dicitura:
@font-face{font-family:'Glyphicons Halflings';
src:url(fonts/glyphicons-halflings-regular.eot);
src:url(fonts/glyphicons-halflings-regular.eot?#iefix)
format("embedded-opentype"),url(fonts/glyphicons-halflings-regular.woff2)
format("woff2"),url(fonts/glyphicons-halflings-regular.woff)
format("woff"),url(fonts/glyphicons-halflings-regular.ttf)
format("truetype"),url(fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular)format("svg")}
.glyphicon{
position:relative;
top:1px;
display:inline-block;
font-family:'Glyphicons Halflings';
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale}

Essa utilizza la direttiva @font-face per i font da usare, mentre con font-family assegna un nome al font e con src richiama gli URL dei font nei formati utilizzati per le pagine Web:
EOT (Embedded OpenType), TTF (TrueType Font), WOFF (Web Open Font Format), SVG (Scalable Vector Graphics).

Successivamente va richiamato, sempre nel CSS, la classe relativa al glifo, ad esempio l'asterisco:
.glyphicon-asterisk:before{content:"\002a"}

Infine nel body, va inserita la classe:
<span class="glyphicon glyphicon-asterisk"></span>
alla quale è associabile un CSS, per esempio in linea, per la formattazione

Dal seguente link scarica tutti i fonts e i codici (110 KB)

Nella tabella sottostante vanno scelti il nome ed il valore alfanumerico che, nell'esempio appena scritto, vanno sostituiti ad asterisk e a\002a

Qui di seguito gli oltre 250 bootstrap glyphicons disponibili. Un glifo per ogni necessità.

  • asterisk
    \002a
  • plus
    \002b
  • euro
    \20ac
  • eur
    \20ac
  • minus
    \2212
  • cloud
    \2601
  • envelope
    \2709
  • pencil
    \270f
  • glass
    \e001
  • music
    \e002
  • search
    \e003
  • heart
    \e005
  • star
    \e006
  • star-empty
    \e007
  • user
    \e008
  • film
    \e009
  • th-large
    \e010
  • th
    \e011
  • th-list
    \e012
  • ok
    \e013
  • remove
    \e014
  • zoom-in
    \e015
  • zoom-out
    \e016
  • off
    \e017
  • signal
    \e018
  • cog
    \e019
  • trash
    \e020
  • home
    \e021
  • file
    \e022
  • time
    \e023
  • road
    \e024
  • download-alt
    \e025
  • download
    \e026
  • upload
    \e027
  • inbox
    \e028
  • play-circle
    \e029
  • repeat
    \e030
  • refresh
    \e031
  • list-alt
    \e032
  • lock
    \e033
  • flag
    \e034
  • headphones
    \e035
  • volume-off
    \e036
  • volume-down
    \e037
  • volume-up
    \e038
  • qrcode
    \e039
  • barcode
    \e040
  • tag
    \e041
  • tags
    \e042
  • book
    \e043
  • bookmark
    \e044
  • print
    \e045
  • camera
    \e046
  • font
    \e047
  • bold
    \e048
  • italic
    \e049
  • text-height
    \e050
  • text-width
    \e051
  • align-left
    \e052
  • center
    \e053
  • align-right
    \e054
  • align-justify
    \e055
  • list
    \e056
  • indent-left
    \e057
  • indent-right
    \e058
  • facetime-video
    \e059
  • picture
    \e060
  • map-marker
    \e062
  • adjust
    \e063
  • tint
    \e064
  • edit
    \e065
  • share
    \e066
  • check
    \e067
  • move
    \e068
  • step-backward
    \e069
  • fast-backward
    \e070
  • backward
    \e071
  • play
    \e072
  • pause
    \e073
  • stop
    \e074
  • forward
    \e075
  • fast-forward
    \e076
  • step-forward
    \e077
  • eject
    \e078
  • chevron-left
    \e079
  • chevron-right
    \e080
  • plus-sign
    \e081
  • minus-sign
    \e082
  • remove-sign
    \e083
  • ok-sign
    \e084
  • question-sign
    \e085
  • info-sign
    \e086
  • screenshot
    \e087
  • remove-circle
    \e088
  • ok-circle
    \e089
  • ban-circle
    \e090
  • arrow-left
    \e091
  • arrow-right
    \e092
  • arrow-up
    \e093
  • arrow-down
    \e094
  • share-alt
    \e095
  • resize-full
    \e096
  • resize-small
    \e097
  • exclamation-sign
    \e101
  • gift
    \e102
  • leaf
    \e103
  • fire
    \e104
  • eye-open
    \e105
  • eye-close
    \e106
  • warning-sign
    \e107
  • plane
    \e108
  • calendar
    \e109
  • random
    \e110
  • comment
    \e111
  • magnet
    \e112
  • chevron-up
    \e113
  • chevron-down
    \e114
  • retweet
    \e115
  • shopping-cart
    \e116
  • folder-close
    \e117
  • folder-open
    \e118
  • resize-vertical
    \e119
  • resize-horizontal
    \e120
  • hdd
    \e121
  • bullhorn
    \e122
  • bell
    \e123
  • certificate
    \e124
  • thumbs-up
    \e125
  • thumbs-down
    \e126
  • hand-right
    \e127
  • hand-left
    \e128
  • hand-up
    \e129
  • hand-down
    \e130
  • circle-arrow-right
    \e131
  • circle-arrow-left
    \e132
  • circle-arrow-up
    \e133
  • circle-arrow-down
    \e134
  • globe
    \e135
  • wrench
    \e136
  • tasks
    \e137
  • filter
    \e138
  • briefcase
    \e139
  • fullscreen
    \e140
  • dashboard
    \e141
  • paperclip
    \e142
  • heart-empty
    \e143
  • link
    \e144
  • phone
    \e145
  • pushpin
    \e146
  • usd
    \e148
  • gbp
    \e149
  • sort
    e150
  • sort-by-alphabet
    \e151
  • sort-by-alphabet-alt
    \e152
  • sort-by-order
    \e153
  • sort-by-order-alt
    \e154
  • sort-by-attributes
    \e155
  • sort-by-attributes-alt
    \e156
  • unchecked
    \e157
  • expand
    \e158
  • collapse-down
    \e159
  • collapse-up
    \e160
  • log-in
    \e161
  • flash
    \e162
  • log-out
    \e163
  • new-window
    \e164
  • record
    \e165
  • save
    \e166
  • open
    \e167
  • saved
    \e168
  • import
    \e169
  • export
    \e170
  • send
    \e171
  • floppy-disk
    \e172
  • floppy-saved
    \e173
  • floppy-remove
    \e174
  • floppy-save
    \e175
  • floppy-open
    \e176
  • credit-card
    \e177
  • transfer
    \e178
  • cutlery
    \e179
  • header
    \e180
  • compressed
    \e181
  • earphone
    \e182
  • phone-alt
    \e183
  • tower
    \e184
  • stats
    \e185
  • sd-video
    \e186
  • hd-video
    \e187
  • subtitles
    \e188
  • sound-stereo
    \e189
  • sound-dolby
    \e190
  • sound-5-1
    \e191
  • sound-6-1
    \e192
  • sound-7-1
    \e193
  • copyright-mark
    \e194
  • registration-mark
    \e195
  • cloud-download
    \e197
  • cloud-upload
    \e198
  • tree-conifer
    \e199
  • tree-deciduous
    \e200
  • cd
    \e201
  • save-file
    \e202
  • open-file
    \e203
  • level-up
    \e204
  • copy
    \e205
  • paste
    \e206
  • alert
    \e209
  • equalizer
    \e210
  • king
    \e211
  • queen
    \e212
  • pawn
    \e213
  • bishop
    \e214
  • knight
    \e215
  • baby-formula
    \e216
  • tent
    \26fa
  • blackboard
    \e218
  • bed
    \e219
  • apple
    \f8ff
  • erase
    \e221
  • hourglass
    \231b
  • lamp
    \e223
  • duplicate
    \e224
  • piggy-bank
    \e225
  • scissors
    \e226
  • bitcoin
    \e227
  • btc
    \e227
  • xbt
    \e227
  • yen
    \00a5
  • jpy
    \00a5
  • ruble
    \20bd
  • rub
    \20bd
  • scale
    \e230
  • ice-lolly
    \e231
  • ice-lolly-tasted
    \e232
  • education
    \e233
  • option-horizontal
    \e234
  • option-vertical
    \e235
  • menu-hamburger
    \e236
  • modal-window
    \e237
  • oil
    \e238
  • grain
    \e239
  • sunglasses
    \e240
  • text-size
    \e241
  • text-color
    \e242
  • text-background
    \e243
  • object-align-top
    \e244
  • object-align-bottom
    \e245
  • object-align-horizontal
    \e246
  • object-align-left
    \e247
  • object-align-vertical
    \e248
  • object-align-right
    \e249
  • triangle-right
    \e250
  • triangle-left
    \e251
  • triangle-bottom
    \e252
  • triangle-top
    \e253
  • console
    \e254
  • superscript
    \e255
  • subscript
    \e256
  • menu-left
    \e257
  • menu-right
    \e258
  • menu-down
    \e259
  • menu-up
    \e260

Font awesome

Il discorso è simile per le icone di font awesome, è possibile infatti richiamare il file seguente:
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

(stringa disponibile su https://fontawesome.com/start)
Ed inserire nel body i richiami delle icone preferite usando uno dei due seguenti tag (qui l'esempio è fatto con l'icona dell'igloo):
<i class="fas fa-igloo"></i>
oppure
<span class="fas fa-igloo"></span>

Qui la lista delle circa 1500 icone gratuite free https://fontawesome.com/icons?d=gallery&m=free

Forme con i CSS

I CSS sono in grado di creare tutti i tipi di forme. Basta aggiungere larghezza e altezza e si origina un rettangolo oppure il raggio (border-radius) e si ottiene una forma arrotondata. Con gli pseudo elementi CSS before e after, è possibile inserire nella pagina HTML un contenuto non presente nel documento e quindi altre due forme oltre all'elemento originale (before inserisce un altro elemento all’inizio del contenuto dell’elemento individuato dal selettore, mentre after lo inserisce a chiudere il contenuto dell’elemento individuato dal selettore). Con questi trucchi è possibile creare molte forme in CSS con un solo elemento HTML e dunque realizzarne tantissime, vediamone alcune.
Il punto d'inizio è creare un div a cui viene assegnato un id, come in quest'esempio: <div id="nomeforma"></div> a cui aggiungere regole CSS opportune.
Ecco le regole per alcune forme:

#quadrato{
width:100px;
height:100px;
background:blue}

#rettangolo{
width:200px;
height:100px;
background:blue}

#cerchio{
width:100px;
height:100px;
background:blue;
border-radius:50%}

#ellisse{
width:200px;
height:100px;
background:blue;
border-radius:100px / 50px}

#trapezio{
width:100px;
height:0;
border-bottom:100px solid blue;
border-left:25px solid transparent;
border-right:25px solid transparent}

#parallelogramma{
width:150px;
height:100px;
transform:skew(20deg);
background:blue}

#triangolo-su{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid blue}
/*border-top per giù border-right: 50px e border-bottom: 50px per sx border-top: 50px e border-left: 100px e border-bottom: 50px per dx*/

#triangolo-topleft{
width:0;
height:0;
border-top:100px solid blue;
border-right:100px solid transparent}
/*border-left per topright border-bottom per bottomleft border-bottom e border-left per bottomright */

Ecco invece le forme che si possono ottenere utilizzando gli pseudo elementi CSS before e after

#curvedarrow{
position:relative;
width:0;
height:0;
border-top:9px solid transparent;
border-right:9px solid blue;
transform:rotate(10deg)}
#curvedarrow:after{
content:"";
position:absolute;
border:0 solid transparent;
border-top:3px solid blue;
border-radius:20px 0 0 0;
top:-12px;left:-9px;
width:12px;
height:12px;
transform:rotate(45deg)}

#stella{margin:50px 0;
position:relative;
display:block;
color:blue;
width:0;
height:0;
border-right:100px solid transparent;
border-bottom:70px solid blue;
border-left:100px solid transparent;
transform:rotate(35deg)}
#stella:before{
border-bottom:80px solid blue;
border-left:30px solid transparent;
border-right:30px solid transparent;
position:absolute;
height:0;
width:0;
top:-45px;
left:-65px;
display:block;
content:'';
transform:rotate(-35deg)}
#stella:after{
position:absolute;
display:block;
color:blue;
top:3px;
left:-105px;
width:0;
height:0;
border-right:100px solid transparent;
border-bottom:70px solid blue;
border-left:100px solid transparent;
transform:rotate(-70deg);
content:''}

#pentagono{
position:relative;
width:54px;
box-sizing:content-box;
border-width:50px 18px 0;
border-style:solid;
border-color:blue transparent}
#pentagono:before{
content:"";
position:absolute;
height:0;
width:0;
top:-85px;
left:-18px;
border-width:0 45px 35px;
border-style:solid;
border-color:transparent transparent blue}

#cuore{
position:relative;
width:100px;
height:90px}
#cuore:before,#cuore:after{
position:absolute;
content:"";
left:50px;
top:0;
width:50px;
height:80px;
background:blue;
border-radius:50px 50px 0 0;
transform:rotate(-45deg);
transform-origin:0 100%}
#cuore:after{
left:0;
transform:rotate(45deg);
transform-origin:100% 100%}

#infinito{
position:relative;
width:212px;
height:100px;
box-sizing:content-box}
#infinito:before,#infinito:after{
content:"";
box-sizing:content-box;
position:absolute;
top:0;
left:0;
width:60px;
height:60px;
border:20px solid blue;
border-radius:50px 50px 0 50px;
transform:rotate(-45deg)}
#infinito:after{
left:auto;
right:0;
border-radius:50px 50px 50px 0;
transform:rotate(45deg)}

#fumetto{
width:120px;
height:80px;
background:blue;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px}
#fumetto:before{
content:"";
position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid transparent;
border-right:26px solid blue;
border-bottom:13px solid transparent}

#lente{
font-size:10em;
display:inline-block;
width:.4em;
box-sizing:content-box;
height:.4em;
border:.1em solid blue;
position:relative;
border-radius:.35em}
#lente:before{
content:"";
display:inline-block;
position:absolute;
right:-.25em;
bottom:-.1em;
border-width:0;
background:blue;
width:.35em;
height:.08em;
transform:rotate(45deg)}

#freccia{
width:20px;
height:40px;
position:relative;
background:blue}
#freccia:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:0;
border-left:20px solid #fff;
border-top:20px solid transparent;
border-bottom:20px solid transparent}
#freccia:before{
content:"";
position:absolute;
right:-20px;
bottom:0;
width:0;
height:0;
border-left:20px solid blue;
border-top:20px solid transparent;
border-bottom:20px solid transparent}

#lucchetto{
font-size:8px;
position:relative;
width:18em;
height:13em;
border-radius:2em;
top:10em;
box-sizing:border-box;
border:3.5em solid blue;
border-right-width:7.5em;
border-left-width:7.5em;
margin:0 0 6rem}
#lucchetto:before{
content:"";
box-sizing:border-box;
position:absolute;
border:2.5em solid blue;
width:14em;
height:12em;
left:50%;
margin-left:-7em;
top:-12em;
border-top-left-radius:7em;
border-top-right-radius:7em}
#lucchetto:after{
content:"";
box-sizing:border-box;
position:absolute;
border:1em solid blue;
width:5em;
height:8em;
border-radius:2.5em;
left:50%;
top:-1em;
margin-left:-2.5em}

Se vuoi contattarmi chiamami al 347.2291870, scrivimi su pacchiarotti@gmail.com o su WhatsApp oppure compila il form sottostante

Segui l'hashtag #AndreaPacchiarotti