[thecashbagParticipant]

I am trying to add some font awesome icons into the theme like this:

<i class=”fa fa-lock” aria-hidden=”true”></i>
<i class=”fa fa-truck” aria-hidden=”true”></i>
<i class=”fa fa-refresh” aria-hidden=”true”></i>

But nothing is showing.

What am I doing wrong?

[FriechModerator]

Hi There,

Thanks for writing in! You can use the icon shortcode instead.

http://demo.theme.co/renew-1/shortcodes/icons/

Or if you prefer to use the class, replace the fa with x-icon

<i class="x-icon x-icon-lock" aria-hidden="true"></i>
<i class="x-icon x-icon-truck" aria-hidden="true"></i>
<i class="x-icon x-icon-refresh" aria-hidden="true"></i>

Hope it helps. Cheers!

[thecashbagParticipant]

Thanks but they do not work. I also tried the shortcode as you suggested, but no luck.

I am using the below code in my functions.php file to insert them below the WooCommerce checkout pay button:

/* Adds text below checkout button */
function ben_after_place_order_button() {
    echo'<div class="checkout-helper-outer">
    		<div class="checkout-helper-inner">
    			<i class="x-icon x-icon-lock" aria-hidden="true"></i>Your checkout is secured with bank grade security encryption
    		</div>
    		<div class="checkout-helper-inner">
    			<i class="x-icon x-icon-truck" aria-hidden="true"></i>Free standard shipping on all orders
    		</div>
    		<div class="checkout-helper-inner">
    			<i class="x-icon x-icon-refresh" aria-hidden="true"></i>Free return shipping on all orders
    		</div>
    	</div>';
}
add_action('woocommerce_review_order_after_submit','ben_after_place_order_button');

[LelyModerator]

Hi There,

Please update that code to this:

function ben_after_place_order_button() {
    echo'<div class="checkout-helper-outer">
    		<div class="checkout-helper-inner">';
    			echo do_shortcode('[x_icon type="lock"]');
				echo 'Your checkout is secured with bank grade security encryption
    		</div>
    		<div class="checkout-helper-inner">';
     			echo do_shortcode('[x_icon type="truck"]');
				echo 'Free standard shipping on all orders
    		</div>
    		<div class="checkout-helper-inner">';
      			echo do_shortcode('[x_icon type="refresh"]');
				echo 'Free return shipping on all orders
    		</div>
    	</div>';
}
add_action('woocommerce_review_order_after_submit','ben_after_place_order_button');

Hope this helps.

[thecashbagParticipant]

Thanks yes those shortcodes are working now.

But how do I apply the Font Awesome classes to that shortcode?

For example: fa-3x, fa-flip-horizontal, etc.

See here: http://fontawesome.io/examples/

[LelyModerator]

Hi There,

You’re welcome!

Please add class property.
For example, update this line:
echo do_shortcode('[x_icon type="lock"]');

To this:
echo do_shortcode('[x_icon type="lock" class="fa-3x"]');

Hope this helps

[thecashbagParticipant]

Thanks, but those classes do not work in the shortcode.

[JadeModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[thecashbagParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

The truck icon from font awesome and the icon we have are just the same. X theme also utilizes font awesome and it should be the same. If you wish to use font awesome classes then you’ll have to install the library again and it’s kind of redundant since it will only load the same icons. If you prefer it that way then please check this http://fontawesome.io/get-started/ and follow the installation guide.

The thing that missing here are the icon codes

<i class="x-icon x-icon-lock" aria-hidden="true"></i>
<i class="x-icon x-icon-truck" aria-hidden="true"></i>
<i class="x-icon x-icon-refresh" aria-hidden="true"></i>

It should be like this

<i class="x-icon x-icon-lock" aria-hidden="true" data-x-icon="&#xf023;"></i>
<i class="x-icon x-icon-truck" aria-hidden="true" data-x-icon="&#xf0d1;"></i>
<i class="x-icon x-icon-refresh" aria-hidden="true" data-x-icon="&#xf021;"></i>

And you can find icon codes from here http://fontawesome.io/cheatsheet/

Thanks!

[thecashbagParticipant]

Is there anyway I can get the font awesome classes to work without loading the fonts twice? I don’t want to load multiple cases of font awesome if I can avoid it.

[RadModerator]

Hi there,

It will always load twice since they are from the different source. There is no way to distinguish which is loaded font through CSS. Hence, loading another library will always load another copy of the same font.

Thanks.

[thecashbagParticipant]

No but I mean is there anyway I can use the Font Awesome classes on the fonts that are already loaded via Theme X, without having to load them again.

[Rue NelModerator]

Hello There,

Thanks for the updates! To avoid any conflict with other plugins and so that these other plugins can work with X, we have customized the display of the font awesome icons in X. We are using x-icon and we do no rely on the font awesome classes. having said that, you cannot simply use font awesome classes in X because it will not work. What I would suggest is this:
1] Please add this line in your child theme’s functions.php file

add_filter( 'cornerstone_legacy_font_classes', '__return_true' );

2] And then instead of using the fa classes fa fa-, you can use the x-icon x-icon x-icon- class instead:

<i class="fa fa-lock" aria-hidden="true"></i>
<i class="fa fa-truck" aria-hidden="vtrue"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>

To simply this:

<i class="x-icon x-icon-lock" aria-hidden="true"></i>
<i class="x-icon x-icon-truck" aria-hidden="true"></i>
<i class="x-icon x-icon-refresh" aria-hidden="true"></i>

Hope this would help.

[Author]

Posts