How to use FontAwesome in WordPress Genesis Framework

Tag: |   Category:

Option 01

Copy below code and paste in your functions.php file.

// Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

Option 02

By default Genesis Framework doesn't provide font icon, if you wanted to have in your Genesis theme you have to add it manually. But, it is very easy to add this, you don't need to know css or php. Just follow below few steps...

  1. Firstly, download FontAwesome from here.
  2. Extract the zip file and copy 'css' folder and 'fonts' folder to your child theme
    How to use FontAwesome in WordPress Genesis Framework
  3. Open 'css' folder (from your child theme folder) and delete 'font-awesome.min.css', we don't need this.
  4. Now open 'font-awesome.css' file (from your child theme folder) using your favorite text editor and change the fonts path FROM ../fonts/ TO ../css/ as show below
    Before

    @font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    

    After

    @font-face {
    font-family: 'FontAwesome';
    src: url('../css/fontawesome-webfont.eot?v=4.6.3');
    src: url('../css/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    
  5. Next, open your child theme style.css file and paste below line at the top
    @import url('css/font-awesome.css');
    
  6. That's it...

You can paste this in your text editor 'Text' area, <i class="fa fa-heart"></i>. If the above process work you will be able to see below icon

How-to-use-FontAwesome-in-Wordpress-Genesis-Framework-03

Copyright © 2024 Siam Naulak.
magnifiercrossmenu