Ikoner med Font Awesome Icons

Meh!NjaeOkejGrymtToppen! (1 röster, med ett snitt på: 4,00 av max 5)

Loading...
Ibland vill du säkert piffa till text med hjälp av lite snygga ikoner. Antingen i ett inlägg, eller varför inte i en textwidget?
Nu har våra egna teman Spring13, Bookly13 och Stock13 ett typsnitt med ikoner som heter Font Awesome inbäddat och klart att användas. Och hur gör du det? Häng med, så visar jag.

Exempel 1 | Inlägg med ikoner

1.

Skärmavbild 2014-12-07 kl. 13.00.51

Här tänkte jag skriva ett vanligt inlägg där jag vill tipsa om WordPress-appen för mina läsare och ge länkar till de olika ”app-affärer” som finns.
Eftersom vi ska jobba lite med ”kod” så har jag växlat över till ”Text”-läget, så vi ser koden i inlägget. (Du hittar de två knapparna för ”Visuell” och ”Text” uppe till höger i innehållsfältet där vi skriver vårt inlägg.)

2.

Kodsnutten för att lägga in en ikon är

<i class="fa fa-ikonnamn"></i>

där vi byter ut ”fa-ikonnamn” mot den ikon vi vill använda.
http://fontawesome.io/icons/ hittar ni en lista med bilder på alla ikoner som finns med namn till.

De tre ikoner jag skulle vilja använda är fa-apple, fa-android och fa-windows då jag ska länka till deras respektive butiker.

3.

Skärmavbild 2014-12-07 kl. 13.14.45

Som ni ser har jag nu lagt till kodsnutten för mina respektive ikoner. Dags att förhandsgranska. Det kan vi göra genom att klicka på ”förhandsgranska” som ligger i samma ruta ovanför ”publicera”.

Skärmavbild 2014-12-07 kl. 13.17.04

Så här kommer inlägget att se ut, nu med toksnygga ikoner. 🙂

4.

Skärmavbild 2014-12-07 kl. 13.18.44

Nu går vi tillbaka och redigerar inlägget igen. Dags att göra länkar. Markera första raden och klicka på ”link” i verktygsraden ovanför.

Skärmavbild 2014-12-07 kl. 13.20.23

Klistra in länken till den adress du vill länka till. Välj om länken ska öppnas i ett nytt fönster och klicka på ”Lägg till länk”.
Gör likadant med alla länkar.

5.

Skärmavbild 2014-12-07 kl. 13.23.33

Nu ser ni att länkarna är klara. Bara att testa att de funkar.

Exempel 2 | Widget

Du kan även använda detta i en text-widget. Jag har lagt till en text-widget och tänker göra en kom-ihåg-lista.

1.

Skärmavbild 2014-12-07 kl. 13.33.23

Här har jag skrivit upp saker som jag vill lista. Glöm inte att bocka för ”Lägg till styckesindelning automatiskt” så det blir radbryt i texten.

2.

Skärmavbild 2014-12-07 kl. 13.40.20

Jag använder de båda ”fa-check-square-o” och ”fa-square-o” som i det ena fallet är en ruta och den andra en ibockad ruta.
Spara när du är nöjd och förhandsgranska.

Skärmavbild 2014-12-07 kl. 13.40.38

Nu är allt klart! Det är bara till att låta fantasin spela fritt nu. Ta en titt på vilka ikoner som finns.

 

Kommentera