Tas upp i detta inlägg....
Obs..... mozilla strular med @font, iaf ikoner..

• Hur man använder Fontawesome-ikonerna
• @Font face ikoner / @Font face typsnitt
• Ex. på hur man kan styla rubriken för inlägg

Fontawesome.
Några exempel av ett fåtal av alla ikoner

• Hmm .. varför är den grön...
• in lists
• in lists

• Check
• as bullets

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
kamera lixom
fa-lg fa-2x fa-3x fa-4x fa-5x

(de fungerar bättre med ljus bakgrund....??)

 









Hur använder man dom?

Börja med att lägga in detta i startsida inom head:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


Hur ändrar man färgen på dom så det passar ens blogg? / color picker

Lägg in detta i stilmall:
article span, article i {color: #767A87}


Varför var den första fyrkanten grön?

Man kan använda style="color:green":
<li><i class="fa-li fa fa-square" style="color:green"></i>


Vilken kod användes för att ta fram ikonerna i början? (inläggskod/html)

Denna:
<ul class="fa-ul""> <li><i class="fa-li fa fa-square" style="color:green"></i> Hmm .. varför är den grön...</li> <li><i class="fa-li fa fa-square"></i>andra</li> <li><i class="fa-li fa fa-square"></i>in lists</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul> <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul> <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> fa-twitter on fa-square-o<br> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span> fa-flag on fa-circle<br> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span> fa-terminal on fa-square<br> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger"></i> </span> kamera lixom<br> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x

---

@Font face går även dra in symboler med genom html/css/text..
Ett bra ikon-paket är Raphaël Icon-Set".



Kasta in i stilmall.
(längre förklaringen är att man använder .eot och ttf för att det ska fungera propert i chrome och IE, man klistrar in sökvägarna i ett @font-face i css.)

......
@font-face { font-family: symbol; src: url('https://www.dropbox.com/s/cjsgsvvapbh2lc9/raphaelicons-webfont.eot?dl=1#iefix') format('embedded-opentype'), url('https://dl-web.dropbox.com/get/Fontss/Iconfont/raphaelicons-webfont.ttf?_subject_uid=91500840&w=AABc-Z-9VAWVl7P1WsCAAbxV8GNzchROVwm4H6qaTj4dSA&dl=1') format('truetype')}

När du skriver ett inlägg så kallar du in denna familj av font med:
<font face="symbol" style="font-size:30px" color="red"><br><br>230573408=(¤/?</font>

Resultatet från rutan ovanför:

230573408=(¤/?



1 ... (color="#DBD032").

---

Glöm inte alla fonter som finns på Dafont.com
Om du är osäker hur du använder dessa...
1. Ladda ner fonten från till ex Dafont
2. Konvertera filen genom Fontsquirrel.
3. Ladda upp eot och ttf formaten till ditt dropbox-konto eller annat ställe som kan dela dom.
4. Högerklicka fram nerladdningslänken till eot och ttf, klistra in där det passar i denna kod:
@font-face { font-family: namnpåfonten; src: url('sökvägEOT#iefix') format('embedded-opentype'), url('sökvägTTF') format('truetype')}
I stilmall ...

---

Styla rubriken för inläggen

1 högerklicka på din rubrik, välj granska komponent.
2 hitta rubrikstycket, vad ligger det i? I detta fall < h2 > < a> ( h2 a )


Kolla till höger när du markerat rätt rad.. min rubrik heter .post header h2 a.
Sedan för att man ska kunna ange inställningar för att ändra vad som händer när musen är över rubriken måste man lägga till :hover ( .post header h2 a:hover ).
Visst kan även ange :active också, så det flashar till när någon trycker ... eller en besökt rubrik :visited går också lägga in inställningar för...









I stilmall:
.post header h2 a { font-family: ventilla; font-size: 160px; font-weight: 500; line-height: 40%; padding: 0 35px 0px 25px; color:#8C9BA3; -webkit-mask-image: -webkit-gradient(linear,left top, left bottom, color-stop(15%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,0.15))); mask-image: -webkit-gradient(linear,left top, left bottom, color-stop(15%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,0.15))); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; text-shadow: 1.5px 0px 0px #fff, -0.5px -0.75px 1px #fff, -1px -1.5px 0px #fff;} .post header h2 a:hover { color:#000; -webkit-mask-image: -webkit-gradient(linear,left top, left bottom, color-stop(15%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,0.15))); text-shadow: 1.5px 0px 0px #fff, -0.5px -0.75px 1px #fff, -1px -1.5px 0px #fff;}

Dra in fonten: (som i förra stycket...)
Stilmall:
@font-face { font-family: namnpåfonten; src: url('sökvägEOT#iefix') format('embedded-opentype'), url('sökvägTTF') format('truetype')}