Font Awesome !
Version 5 - en kort introduktion
Awesome er en font som består af ikoner.
Fordelen med ikoner fra en font i stedet for billedfiler er, at de skalerer pænt på alle platforme. Prøv at zoome denne side.
Awesome er gratis, og må bruges frit.
Der er flere måder at bruge Font Awesome - her er den simpleste.
Fase A - i en Photoshop design fil:
1 Download:
Gå til fontawesome.com og download Font Awesome:
2 Udpak zipfilen og installer fonts
3 Find den ikon du skal bruge:
Gå til fontawesome.com og vælg menuen Icons:
Vælg en gruppe, og vælg en ikon:
4 I Photoshop:
Vælg tekst værktøjet, vælg Font Awesome font, og skrive navnet:
Klik på fluebenet og Photoshop viser ikonet:
Fase B - i websitet:
1 Link til Awesome css-filen i <head>:
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
2 Find den ikon du skal bruge:
Gå til fontawesome.com og vælg menuen Icons:
Vælg en gruppe, og vælg en ikon:
Klik på den du vil have,
.. og kopi-paste koden til din HTML fil.
Fx: <i class="fas fa-camera"></i>
3a Indstil størrelse med fa classes:
<i class="fas fa-camera fa-3x">
<i class="fas fa-camera fa-5x">
3b Eller indstil størrelse og farve med css:
font-size:2em; color:red;
font-size:3em; color:#0CBC3C;
font-size:4em; color:#6688DA;
Flere eksempler:
Et udvalg af pil ikoner:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.fa-quote-left{
font-size:4em;
float:left;
padding-right:0.3em;
color:#777;
}