Integrare nel proprio sito Font Awesome Icons

Colixiocss il tema di questo sito integra Font Awesome Icons,  tramite jquery al passsaggio del mouse appaiono delle icone a segnalare links, intestazioni, paragrafi o liste.

Innanzitutto all’interno del file functions.php va inserito l’enqueue allo stile Font Awesome Icons come in esempio qua sotto:

1
2
3
4
function my_scripts() {
wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.4.2/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Ed ora un esempio in jquery, ogni volta che passerà il mouse sopra un link presente nel body del sito verrà visualizzata una icons a forma di link:

1
2
3
4
5
$( "body a" ).hover( function(){
$(this).append('<i class="fas fa-link"></i>');
}, function() {
$( '.fa-link' ).detach().finish();
});

Con Font Awesome Icons naturalmente si possono fare diverse cose, come ad esempio creare effetti grafici animati e rendere graficamente i bulleted list più accattivanti, etc..

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Su questo sito Web si utilizzano strumenti tecnici necessari al funzionamento ottimale e di terze parti che memorizzano piccoli file (cookie) sul tuo dispositivo. I cookie vengono normalmente utilizzati per consentire al sito di funzionare correttamente (cookie tecnici), per generare report di navigazione (cookie statistici) e per pubblicizzare adeguatamente i servizi / prodotti (cookie di profilazione). Possiamo utilizzare direttamente i cookie tecnici, ma hai il diritto di scegliere se abilitare o meno i cookie statistici e di profilazione. Abilitando questi cookie, ci aiuti a offrirti un’esperienza migliore. Cookies Policy Privacy Policy.

Alcuni contenuti o funzionalità non sono qui disponibili a causa della tua scelta sulla preferenze sui cookie!

Ciò accade perché la funzionalità / i contenuti contrassegnati come “% SERVICE_NAME%” utilizzano i cookie che hai scelto di mantenere disattivati. Per visualizzare questo contenuto o utilizzare questa funzionalità, si prega di abilitare i cookies: click here to open your cookie preferences.