Menggunakan Font Awesome di Blogger

Kemarin sempat komentar2 di post @wphoet tentang pasang FontAwesome di Blogspot, sebelumnya baca dulu deh apa itu yg dimaksud dengan objek dari judul post ini ? https://github.com/FortAwesome/Font-Awesome dan to de point aja yaa :

Beruntung kita, karena ada layanan CDN yang men-service kita buat pakai code tsb, add code berikut dari CDN font awesome tepat sebelum

Code:

</head>

:

Code:

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

Source

Contoh:


nah berikut nya saya coba pasangin seperti contoh di atas, saya coba pasang di post footer alias widget blog1 (biasanya namanya) :

Code:

<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'><i class="icon-smile"></i> 
        <b:if cond='data:top.showAuthor'>

Berikut hanya contoh saja ya. kamu bisa pasang setiap icon di widget manapun kamu suka dan kebetulan saya ada bikin sekalian demo live simple penggunaannya disini http://www.anakseo.com/

Biar lebih mudah nih ditambahin link cheatsheet icon nya http://fortawesome.github.io/Font-Awesome/cheatsheet/

 

semalam coba-coba bikin CSS

semalam coba-coba bikin CSS-nya tanpa i class dan hasilnya bisa dipasang tapi ada masalah baru lagi, gak bisa dibikin center padahal sdh dipasangin

Code:

text-align:center;

alhasil dicopot lagi buat diutak-atik lagi

 

wphoet wrote:

coba pake

Code:

<i class="icon-share" style="top: -2px; position: relative;"></i>

kaya icon share yg sy pasang tuh sebenernya di naikin -2px contoh bisa pakai top / bottom / right / atau left.. sebenernya bisa juga dipasang div baru trus setting width berapa lebar dan baru di align

 

@fahmi: bisa dipasang jadi

@fahmi: bisa dipasang jadi center ttp pakai css kyk gini

Code:

.Plengdut {
    position: relative;
}

.Plengdut:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #ffffff;
    font-size: 40px;
    padding-right: 0.5em;
    position: absolute;
    top: 30px;
    left: 45px;
}

hasil testingnya :


tapi itu centernya manual pakai left & top di css, kira2 ada yg otomatis langsung center apa gk ya

 

@wphoet demonya di plengdut

@wphoet demonya di plengdut ya dut? eh phoet =))
kasih demo apa yang udah jadinya

 

Fahmi wrote:

demonya di

Code:

www.irmawan.me

, kalau yang di plengdut tadi dicoba kyknya link cdn-nya font awesome di bagian head crash dengan scriptnya auto readmore yg saya pasang di head juga, jadi mau di utak-atik dulu lgi

 

wphoet wrote:

kenapa di copy css masternya dijadikan class sendiri? capek2 bikin lagi

Code:

.Beranda *:before {
    color: #FFFFFF;
    content: "?";
    font-family: FontAwesome;
    font-size: 40px;
    font-style: normal;
    font-weight: normal;
    left: 45px;
    padding-right: 0.5em;
    position: absolute;
    text-decoration: inherit;
    top: 30px;
}

bukannya kalau mau pasang home icon tinggal pasang kode

Code:

<i class="icon-home"></i>

kalau mau dibesarin lagi ukurannya tinggal

Code:

<i class="icon-home icon-2x"></i>

2x 3x 4x

 

@fahmi : nah itu htmlnya yg

@fahmi : nah itu htmlnya yg pakai

Code:

<i class>

mau saya coba dulu di plengdut, jadi yg irmawan.me pakai css, yg plengdut.com pakai html trs mau dilihat mana yg lebih gede size templatenya. maklum lgi gak ada kerjaan *lol*

 

Tetep kereeen

Owalah... gpp asik dan tetep kereeeen

 

Kelihatannya sih keren

kelihatannya sih keren tapi saya ga ngerti soal coding jadi ikut nyimak aja

 

lebih enak sih tinggal

lebih enak sih tinggal menggunakan saja tanpa perlu ribet koding2an, rapihin heading saja belum kelar2 nih ngak ngerti cssnya.

 

Saya juga mau pakai di

Saya juga mau pakai di blogspot ah

 

Kalau tidak mau ribet,

Kalau tidak mau ribet, tinggal pakai template yang disukai aja.