Font Awesome Icons in your site, example and explanation

Colixiocss the theme of this site integrates Font Awesome Icons, through jquery when mouse cursor hovers over a links, headers, paragraphs or lists show a Icon

First of all, within the functions.php file the enqueue style of Font Awesome Icons, see in the example below:

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' );

And now an example in jquery, every time you hover over a link in the body of the site you will see a link icon:

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

With Font Awesome Icons, of course, you can do various things, such as creating animated graphic effects and graphically making the most engaging bulleted lists, etc...

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

On this website we use first or third-party tools that store small files (cookie) on your device. Cookies are normally used to allow the site to run properly (technical cookies), to generate navigation usage reports (statistics cookies) and to suitable advertise our services/products (profiling cookies). We can directly use technical cookies, but you have the right to choose whether or not to enable statistical and profiling cookies. Enabling these cookies, you help us to offer you a better experience. Coockies Policy Privacy Policy.

Some contents or functionalities here are not available due to your cookie preferences!

This happens because the functionality/content marked as “%SERVICE_NAME%” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.