Etikettarkiv: kod

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.

 

Fixa till en ram på bilder

Meh!NjaeOkejGrymtToppen! (1 röster, med ett snitt på: 5,00 av max 5)
Loading...
Som en del av er märkt, så försvann möjligheten till att lägga till ramar på era bilder i mediahanteraren i o m uppdateringen till WordPress 3.9. Det kan vara möjligt att de återinför det, men vilket som, får ni ett litet kodexempel på hur man kan göra ämdå.

Skärmavbild 2014-05-16 kl. 14.52.21

1. Börja med att ladda upp och infoga en bild, precis som vanligt.

Skärmavbild 2014-05-16 kl. 14.52.49

2. Växla från ”visuell” till ”text”-läget, som du hittar längst till höger i redigeringsfältet. Nu ser du koden bakom inlägget, i stället för det visuella.
Leta rätt på den infogade bildens kod genom att leta efter den kodsnutt som börjar med <img...

Skärmavbild 2014-05-16 kl. 14.53.41

3. Lägg nu till kodsnutten style="border: 10px solid #000;" så att det ser ut som det blåmarkerade på bilden ovan.

Skärmavbild 2014-05-16 kl. 14.53.50

4. Nu kan du gå tillbaka till det visuella läget, så har du en svart, 10 pixlar bred ram runt din bild.

Du kan givevis ändra antalet pixlar på ramen. Ju fler, desto fetare. Solid kan bytas ut mot dashed eller dotted, för streckad eller prickad linje och #000 mot någon annan färg, exempelvis #FFF för vitt.