Font Awesome je tzv. icon font koji se u verziji 4.1.0 sastoji od 439 skalabilnih vektorskih ikona koje možete prilagođavati preko CSS-a te mjenjati boju, veličinu, dodavati sjene (drop-shadow), podešavati prozirnost itd.
Font Awesome ikone su originalno dizajnirane za Twitter Bootstrap te su dostupne za korištenje na bilo kojem projektu. Licenca je od sredine 2013. godine u potpunosti open source i GPL kompatibilna što znači da fontove možete koristiti u open source ali i u komercijalnim projektima. Više informacija ovdje.
Font Awesome ikone ne koriste JavaScript već samo CSS te zbog toga nema većih problema s kompatibilnošću.
Font Awesome za svakoga
U današnjem članku možete doznati kako koristiti Font Awesome ikone na svojem WordPress sajtu, odnosno kako kreirati shortcode za korištenje u postovima/stranicama te u sidebaru.
Pozivanje fontawesome.css datoteke
Kako bismo mogli koristiti FA ikone, prvo trebamo uključiti/pozvati fontawesome.css datoteku. Pravi način je korištenje wp_enqueue funkcije.
// Učitaj skriptu i stilove add_action( 'wp_enqueue_scripts', 'load_fontawesome_style', 999 ); function load_fontawesome_style() { wp_register_style( 'font-awesome', 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css' ); wp_enqueue_style( 'font-awesome' ); }
Upisivanjem navedenog koda u functions.php datoteku naše (child) teme aktivirali smo Font Awesome ikone na našoj web stranici te bismo ih već mogli koristiti putem HTML metode. No, naš je cilj kreiranje i korištenje intuitivnog shortcode-a.
Kreiranje shortcode-a
Niže navedeni kod možete zalijepiti u functions.php vaše (child) teme:
// Font Awesome Shortcode opcije function addscFontAwesome($atts) { extract(shortcode_atts(array( 'type' => '', 'size' => '', 'rotate' => '', 'flip' => '', 'pull' => '', 'animated' => '', 'class' => '', ), $atts)); $classes = ($type) ? 'fa-'.$type. '' : 'fa-star'; $classes .= ($size) ? ' fa-'.$size.'' : ''; $classes .= ($rotate) ? ' fa-rotate-'.$rotate.'' : ''; $classes .= ($flip) ? ' fa-flip-'.$flip.'' : ''; $classes .= ($pull) ? ' pull-'.$pull.'' : ''; $classes .= ($animated) ? ' fa-spin' : ''; $classes .= ($class) ? ' '.$class : ''; $theAwesomeFont = '<i class="fa '.esc_html($classes).'"></i>'; return $theAwesomeFont; } add_shortcode('icon', 'addscFontAwesome');
Još nam preostaje dodavanje koda kako bismo mogli izvršavati shortcode u sidebar widgetima (što po defaultu nije moguće).
// Omogući izvršavanje shortcode-a u sidebar widgetima add_filter('widget_text', 'do_shortcode');
Eto, omogućili smo funkcionalnost korištenja fonta te nekoliko opcija koje nudi Font Awesome.
Kako koristiti shortcode za Font Awesome ikone
Opcije Font Awesome ikona su dokumentirane na fortawesome.github.io/Font-Awesome/
Sve su ikone jednostavno imenovane. Tako je na primjer ime ikone mikrofona fa-microphone. Naš shortcode automatski dodaje fa- tako da je u shortcode dovoljno napisati ime ikone.
Tip/Vrsta – Ime ikone
SHORTCODE:
[[icon type="microphone"]]
REZULTAT: [icon type=”microphone”]
Size (veličina)
– Ukoliko ne definirate veličinu fonta, ikona će naslijediti taj podatak iz css-a vaše teme. Ako želite veću ikonu, dodajte size=”2x”. Možete koristiti 2x, 3x ili 4x.
SHORTCODE:
[[icon type="microphone" size="3x"]]
REZULTAT: [icon type=”microphone” size=”3x”]
Rotate (rotiraj)
– Za rotaciju upišite vrijednosti 90, 180 ili 270 (stupnjevi rotiranja ikone).
SHORTCODE:
[[icon type="microphone" rotate="90"]]
REZULTAT: [icon type=”microphone” rotate=”90″]
Flip (okreni)
– Dozvoljene vrijednosti vertical ili horizontal.
SHORTCODE:
[[icon type="microphone" flip="vertical"]]
REZULTAT: [icon type=”microphone” flip=”vertical”]
Pull (povuci)
– za floatanje ikone možete koristiti vrijednosti left ili right
SHORTCODE:
[[icon type="microphone" pull="right"]]
REZULTAT: [icon type=”microphone” pull=”right”]
Spin (animacija)
– za animaciju (okretanje) ikone, upišite vrijednost “spin”. Iako možemo “zavrtiti” bilo koju ikonu, malo je vjerojatno da ćete animacije koristiti za bilo što drugo nego za posebno namijenjene “spin” ikone, poput loadera ili refresha.
SHORTCODE:
[[icon type="refresh" animated="spin"]]
REZULTAT: [icon type=”refresh” animated=”spin”]
Kombinacije
– Sve gore navedene opcije možete po potrebi kombinirati.
SHORTCODE:
[[icon type="volume-up" size="3x" rotate="270"]]
REZULTAT: [icon type=”volume-up” size=”3x” rotate=”270″]
Inline ikone
SHORTCODE:
<h2>[[icon type="bolt"]] Stavljanje naglaska na neki naslov</h2>
REZULTAT:
[icon type=”bolt”] Stavljanje naglaska na neki naslov
Wrapanje teksta oko ikone
SHORTCODE:
[[icon type="quote-left" size="3x" pull="left"]] Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeća, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska.
REZULTAT:
[icon type=”quote-left” size=”3x” pull=”left”] Lorem Ipsum je jednostavno probni tekst koji se koristi u tiskarskoj i slovoslagarskoj industriji. Lorem Ipsum postoji kao industrijski standard još od 16-og stoljeća, kada je nepoznati tiskar uzeo tiskarsku galiju slova i posložio ih da bi napravio knjigu s uzorkom tiska.
Stilovi
– dodatni stilovi za ikone
SHORTCODE:
[[icon type="microphone" class="majk"]]
Shortcode vam omogućuje dodavanje css klase ikonama tako da u CSS-u možete definirati pravila za dotičnu ikonu :
i.fa.fa-microphone.majk { color: #6B4F4F; text-shadow: 4px 3px 0px rgba(153, 75, 75, 0.72), 9px 8px 0px rgba(163, 56, 56, 0.33); }
ili možete učiniti slijedeće:
SHORTCODE:
<span style="color:#ec4f2c">[[icon type="heart-o" size="3x"]]</span>
REZULTAT: [icon type=”heart-o” size=”3x”]
Font Awesome shortcode plugin
Alternativno, možete skinuti jednostavan plugin koji sam kreirao za ovaj članak a omogućuje vam gore navedene funkcionalnosti. Downloadajte ga, instalirajte ga kao svaki drugi plugin (upload zip datoteke) , aktivirajte i uživajte u Font Awesome ikonama.
BTW, ako želite koristiti Font Awesome shortcode bilo gdje u svojoj temi, shortcode možete dodati koristeći do_shortcode funkciju, odnosno tako što dodate slijedeći kod:
<?php echo do_shortcode("[tvoj_shortcode]");
[clear]
Plugin za dodavanje Font Awesome ikona putem shortcode-a u postovima/stranicama i sidebar widgetima.
NAPOMENA: testirano na WordPressu 3.9.1. koristeći slijedeće teme: Twenty Twelve, Twenty Thitreen, Twenty Fourteen.