Retain Font Awesome 4.7.0

Osztreicher · July 8, 2019, 10:31pm

Hello,

I have been using a plugin to keep using Font Awesome 4.7.0 because, since the update to Font Awesome 5 some of the icons and site arrows that I had been using are no longer available or have been changed to the licensed font awesome. I did pay for font awesome, but I don’t necessarily want to re-design or code my site to use the newer icons, I am happy to continue with 4.7.0 for the time being.

I have managed to keep 4.7.0 using a plugin, but I would rather just host the font locally and do away with the additional plugin and DNS lookup, etc. when the site loads. Can someone tell me what code I need to add/change to just use the older font awesome from my site’s hosting storage?

Thank you.

christopher · July 9, 2019, 8:18am

Hi Gabriel,

Please consider that our theme does use the new version of the Font Awesome, and this might cause conflict. If you use the elements or options of the theme, it will use version 5. So you need to add custom HTML code whenever you want to use the old version.

The request is customization and outside of our support scope. Here is a good starting point you can follow to know how to add the old version of the font manually.

Thank you for your understanding.

Osztreicher · July 9, 2019, 5:26pm

Well, here’s the thing. When X updated to using Font Awesome 5 as opposed to Font Awesome 4, by site display broke. The arrows on the site menus became JUMBO size and the social icons stopped working altogether on Chrome and Firefox.

I am not a web developer, and things like our footer were custom coded, so to fit it I had to fudge the site into retaining Font Awesome 4.7 in order to keep it’s original design working. I suppose for those that are not developers and had a site built, the move to 5 had the potential to change the look of their sites and stop certain elements from being displayed properly.

friech · July 10, 2019, 1:34am

Hi @Osztreicher,

That might be because of your X Theme and Cornerstone and Wordpress is outdated. Unlike on the earlier versions, on the latest version, we bring all the variants of FontAwesome 5 (solid, regular, light, brands) to the Theme.

You have two options here, you follow the guide provided by Christopher above to use the old version of FontAwesome and keep Wordpress, X, and Cornerstone (and possible other plugins) outdated to avoid conflict.

Or you update everything on your site Wordpress, X, and Cornerstone and avoid potential issues that may occur because of outdated version.

Updating WordPress
Updating Your Themes and Plugins

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Thanks,

Osztreicher · July 10, 2019, 9:59pm

Everything is up to date. The issue is finding and updating the new icon codes in the theme to get the old style icons displayed in FontAwesome 5.

Where do we edit the the arrows in the dropdown menus to make them light weight? And where to I edit the social icons in a customised footer? We use the Icon stack, currently under Font Awesome 5 the social icons disappear or are displayed as placeholders.

This is what correctly displays with Font Awesome 4.7:

This is what displays with Font Awesome 5:

ruenel · July 11, 2019, 12:18am

Hello Gabriel,

It seem that you are using a custom code that created a social icon shortcodes. You will need to update the code of your social icons into this:

// Social Output
// =============================================================================

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook' );
    $twitter     = x_get_option( 'x_social_twitter' );
    $google_plus = x_get_option( 'x_social_googleplus' );
    $linkedin    = x_get_option( 'x_social_linkedin' );
    $xing        = x_get_option( 'x_social_xing' );
    $foursquare  = x_get_option( 'x_social_foursquare' );
    $youtube     = x_get_option( 'x_social_youtube' );
    $vimeo       = x_get_option( 'x_social_vimeo' );
    $instagram   = x_get_option( 'x_social_instagram' );
    $pinterest   = x_get_option( 'x_social_pinterest' );
    $dribbble    = x_get_option( 'x_social_dribbble' );
    $flickr      = x_get_option( 'x_social_flickr' );
    $github      = x_get_option( 'x_social_github' );
    $behance     = x_get_option( 'x_social_behance' );
    $tumblr      = x_get_option( 'x_social_tumblr' );
    $whatsapp    = x_get_option( 'x_social_whatsapp' );
    $soundcloud  = x_get_option( 'x_social_soundcloud' );
    $rss         = x_get_option( 'x_social_rss' );

    $target_blank = x_output_target_blank( false );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" ' . $target_blank . '><i class="x-icon-facebook-square" data-x-icon-b="&#xf082;" aria-hidden="true"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" ' . $target_blank . '><i class="x-icon-twitter-square" data-x-icon-b="&#xf081;" aria-hidden="true"></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" ' . $target_blank . '><i class="x-icon-google-plus-square" data-x-icon-b="&#xf0d4;" aria-hidden="true"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" ' . $target_blank . '><i class="x-icon-linkedin-square" data-x-icon-b="&#xf08c;" aria-hidden="true"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" ' . $target_blank . '><i class="x-icon-xing-square" data-x-icon-b="&#xf169;" aria-hidden="true"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" ' . $target_blank . '><i class="x-icon-foursquare" data-x-icon-b="&#xf180;" aria-hidden="true"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" ' . $target_blank . '><i class="x-icon-youtube-square" data-x-icon-b="&#xf431;" aria-hidden="true"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" ' . $target_blank . '><i class="x-icon-vimeo-square" data-x-icon-b="&#xf194;" aria-hidden="true"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" ' . $target_blank . '><i class="x-icon-instagram" data-x-icon-b="&#xf16d;" aria-hidden="true"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" ' . $target_blank . '><i class="x-icon-pinterest-square" data-x-icon-b="&#xf0d3;" aria-hidden="true"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" ' . $target_blank . '><i class="x-icon-dribbble" data-x-icon-b="&#xf17d;" aria-hidden="true"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" ' . $target_blank . '><i class="x-icon-flickr" data-x-icon-b="&#xf16e;" aria-hidden="true"></i></a>'; endif;
      if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" ' . $target_blank . '><i class="x-icon-github-square" data-x-icon-b="&#xf092;" aria-hidden="true"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" ' . $target_blank . '><i class="x-icon-behance-square" data-x-icon-b="&#xf1b5;" aria-hidden="true"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" ' . $target_blank . '><i class="x-icon-tumblr-square" data-x-icon-b="&#xf174;" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="whatsapp" title="Whatsapp" ' . $target_blank . '><i class="x-icon-whatsapp" data-x-icon-b="&#xf232;" aria-hidden="true"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" ' . $target_blank . '><i class="x-icon-soundcloud" data-x-icon-b="&#xf1be;" aria-hidden="true"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" ' . $target_blank . '><i class="x-icon-rss-square" data-x-icon-s="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

What has changed? It is the icon structure from data-x-icon= attribute into data-x-icon-b=. This is the reason why the icons are not showing.

Hope this explains your issue.

Osztreicher · July 11, 2019, 5:46am

Thank you @RueNel, where do I find this code? And will this help with the arrows in the menus?

There is a social.php in wp-content > themes > X > framework > functions > frontend that is already as you have laid out above. I can’t find other references to the social icons.

friech · July 11, 2019, 6:14am

Hi Gabriel,

That code is only affecting the social icons, you can find that code in your child theme’s functions.php file. Try to remove that code instead, because what you show on the first screenshot above is the default look of the social icons if you did not do any customization on it.

For the menu double-down-arrow, please add this to Theme Options > CSS to make sure it uses the lighter version of the fontawesome.

.x-navbar .desktop .x-nav li>a>span:after {
	font-family: "FontAwesomeLight" !important;
}

Do not edit any file under parent Theme (wp-content > themes > X) it will be overwritten when a theme update is made. Do only all your customization on the child theme (wp-content > themes > x-child).

Cheers!

Osztreicher · July 11, 2019, 7:30am

Thank you @friech, my x-child > functions.php only contains the following. Can I just remove this file and let the parent theme’s functions.php take over?

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================

Also, I had the following in the Theme Options > CSS to try and make the arrows light weight before forcing Font Awesome 4.7. Removing it breaks the social icons (under Font Awesome 4 and 5)

/* --- Change Font Awesome Weight --- */

[data-x-icon-o], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [class*="x-icon-"] {
    font-weight: 400 !important;
}

friech · July 11, 2019, 7:45am

Hi Gabriel,

That is the default content of the child theme’s functions.php, so that means there is no customization on your child theme’s functions.php. No, you can not remove that functions.php file, every theme needs to have that file even child theme.

Please provide us the site URL and login credentials (wp-admin & FTP) in a secure note so we can take a closer look.

Thanks,

Osztreicher · July 11, 2019, 5:04pm

@friech Thanks, secure note added to my previous post.

ruenel · July 11, 2019, 9:13pm

Hello Gabriel,

I have logged in and I could not find any custom php. It turns out that you have inserted an html code in Appearance > Widgets > Footer 1 > Text. It is just weird because I am only seeing this code:

<div class="foot-section-left">
<div class="x-social-global"></div>
</div>

You will need to update it into using this code:

<div class="x-social-global">
	<a href="https://www.facebook.com/CaparisonGuitarCo" class="facebook" title="Facebook" target="_blank" style="outline: none;" rel="noopener noreferrer"><i class="x-icon-facebook-official" data-x-icon-b="&#xf082;" aria-hidden="true" style="color:#fff; font-size:35px; vertical-align: center; padding: 5px;"></i></a>
	<a href="https://twitter.com/caparisonguitar" class="twitter" title="Twitter" target="_blank" rel="noopener noreferrer"><i class="x-icon-twitter-square" data-x-icon-b="&#xf081;" aria-hidden="true" style="color:#fff; font-size:35px; vertical-align: center; padding: 5px;"></i></a>
	<a href="https://www.youtube.com/user/CaparisonGuitarCo/videos" class="youtube" title="Youtube" target="_blank" rel="noopener noreferrer"><i class="x-icon-youtube-square" data-x-icon-b="&#xf431;" aria-hidden="true" style="color:#fff; font-size:35px; vertical-align: center; padding: 5px;"></i></a>
	<a href="https://www.instagram.com/caparisonguitars/" class="instagram" title="instagram" target="_blank" rel="noopener noreferrer"><i class="x-icon-instagram" data-x-icon-b="&#xf16d;" aria-hidden="true" style="color:#fff; font-size:35px; vertical-align: center; padding: 5px;"></i></a>
</div>

The major change in the code is the data-x-icon= into data-x-icon-b=.

Please let us know how it goes.

Osztreicher · July 12, 2019, 9:55pm

@RueNel, thank you very much! I had no idea where our developer had hidden this. It’s all working ok now.

friech · July 13, 2019, 3:28am

We are delighted to assist you with this.

Cheers!

system · July 23, 2019, 3:29am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.