Support » Theme: Quark » FontAwesome 5

  • Resolved Paul Taylor

    (@pftaylor61)


    Have you given any thought to using fontawesome version 5 with this theme? I have made a number of themes from out of this theme, but the social media menu output gives the code <i class=”fa etc
    So most of the fa classes in the theme need amending to fas for fontawesome 5, including several of the social menu outputs (fa-rss etc), but the brands (facebook, twitter etc) need class fab. I am trying to see if I can rearrange everything to get it to work, but having little success yet, because of the stacking of icons. Fontawesome have really complicated things…

Viewing 3 replies - 1 through 3 (of 3 total)
  • Anonymous User 16453565

    (@anonymized-16453565)

    hey, @pftaylor61

    To do that, go to following link and follow steps:

    https://sridharkatakam.com/load-font-awesome-5-wordpress/

    Thanx.

    I found the answer!

    Thanks for the reply. However, you have misunderstood the problem. I did not have a problem using fontawesome v5. My problem was using the code in functions.php in Quark, which delivers the Social Media Menu. Whereas all entries in this menu previously fed class ‘fa’, they now have to feed either ‘fab’ or ‘fas’, depending on whether or not the icon is a brand or not.

    This was a typical line for a social media icon.

    array( 'url' => of_get_option( 'social_twitter', '' ), 'icon' => 'fa-twitter', 'title' => esc_html__( 'Follow me on Twitter', 'qohelet' ) ),

    And all the social media icons were then delivered with:

    $output .= sprintf( '<li><a href="%1$s" title="%2$s"%3$s><span class="fa-stack fa-lg"><i class="fas fa-square fa-stack-2x"></i><i class="fa %4$s fa-stack-1x fa-inverse"></i></span></a></li>',
    					esc_url( $value ),
    					$key['title'],
    					( !of_get_option( 'social_newtab', '0' ) ? '' : ' target="_blank"' ),
    					$key['icon']
    				);

    I have found my own solution. I have now included the class with the of_get_option. Here are two examples:

    array( 'url' => of_get_option( 'social_twitter', '' ), 'icon' => 'fab fa-twitter', 'title' => esc_html__( 'Follow me on Twitter', 'qohelet' ) ),
    array( 'url' => of_get_option( 'social_rss', '' ), 'icon' => 'fas fa-rss', 'title' => esc_html__( 'Subscribe to my RSS Feed', 'qohelet' ) ),

    Then I removed the ‘fa’ class from the sprintf functions, thus:

    
    $output .= sprintf( '<li><a href="%1$s"><span class="fa-stack fa-lg"><i class="fas fa-square fa-stack-2x"></i><i class="fa %4$s fa-stack-1x fa-inverse"></i></span></a></li>',
    					esc_url( $value ),
    					$key['title'],
    					( !of_get_option( 'social_newtab', '0' ) ? '' : ' target="_blank"' ),
    					$key['icon']
    				);

    I hope you can see the differences. This needs to be amended in your functions.php file within Quark. It may be a problem that I created myself, because I wanted an RSS icon, and a Podcast icon, but you can no longer rely on all the fontawesome icons being the same class – some are fas and some are fab.

    • This reply was modified 1 year, 7 months ago by Paul Taylor.
    Theme Author Anthony Hortin

    (@ahortin)

    When I get a chance I’ll have a look into upgrading Quark to use FA5.

    Just as a side note, you might be interested in my other starter theme, Ephemeris, which is also available here in the Theme Directory. It’s a lot newer, has some handy options, and also users FA5.

    You can view a demo here.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘FontAwesome 5’ is closed to new replies.