Return to previous page

How to add a font awesome in text - by Webacto

This topic has 11 replies, 2 voices, and was last updated 8 years, 6 months ago ago by Eva Kemp

Webacto

Participant

October 9, 2015 at 18:11

I need to add this zoom font awesome
<i class=”icon-zoom-in”></i>
at my violet product page bottom
http://lococostyle.com/product/arabesca-handmade-crochet-necklace/

My text box is included in php code, and I have a css class but I don’t know hoy (from where) add this icon.
Can you suggest me a php o css intervent /solution?
waiting for you

thank you

#92918 Copied

10 Answers

Eva Kemp

Support staff

October 9, 2015 at 18:34

Hello,

You can find icons here http://fortawesome.github.io/Font-Awesome/icons/ . To get icon code click on the desired icon and copy the code.

Regards,
Eva Kemp.

#92927 Copied

Webacto

Participant

October 10, 2015 at 10:44

Ok,
I’ve already have the icon code, I only need to positionate it correcly

Which is the correct point of my content-single-product.php code?

I paste it below for your check:
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title – 5
* @hooked woocommerce_template_single_rating – 10
* @hooked woocommerce_template_single_price – 10
* @hooked woocommerce_template_single_excerpt – 20
* @hooked woocommerce_template_single_add_to_cart – 30
* @hooked woocommerce_template_single_meta – 40
* @hooked woocommerce_template_single_sharing – 50
*/
do_action( ‘woocommerce_single_product_summary’ );
?>
<div class=”custom_text”>*</i>Enjoy a powerfull zoom photo moving your mouse above it*</div>
<?php if(etheme_get_option(‘share_icons’) && $layout != ‘fixed’) echo do_shortcode(‘[share text=”‘.get_the_title().'”]’); ?>
</div>
</div>
</div><!– Product information/ END –>

<?php
if($layout == ‘large’) {
?>
<div class=”<?php esc_attr_e( $infor_class ); ?>”>
<?php do_action( ‘woocommerce_after_single_product_summary’ ); ?>
</div>
<?php
}
?>
</div>

<?php

#92996 Copied

Webacto

Participant

October 10, 2015 at 10:45

<i class=”fa fa-search-plus”></i>

#92997 Copied

Eva Kemp

Support staff

October 11, 2015 at 19:03

Hello,

Please take our apologies, but you have a lot of queries that require additional customization of the theme and it’s beyond our basic support scope.
We recommend you to hire some freelancer to help you to customize the theme for your needs.

Thank you for your understanding.

Regards,
Eva Kemp.

#93079 Copied

Webacto

Participant

October 11, 2015 at 19:23

Hello Eva,
I understand, it’s true it’s my first time using these theme and I need extra support, I know.
You’re a really good service, I will reduce the quantity
I will solve the most big part with other support, but some matters are two much technical for be found in other ways, you know.

Thank you for understand and follow to give me the basic theme issue support.

#93085 Copied

Eva Kemp

Support staff

October 12, 2015 at 09:25

Hello,

I don’t see the text on single product page. Please re-add it and specify where exactly the icon should be displayed.

Regards,
Eva Kemp.

#93164 Copied

Webacto

Participant

October 12, 2015 at 15:54

Thank you for understanding,

I’d like that my zoom icon appears as showed in these screenshot:
http://www.lococostyle.com/zoom-productpage.jpg

this is the awesone code <i class=”fa fa-search-plus”></i>, I only need in which point of my content-single-product.php code I need to paste it correctly.

/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title – 5
* @hooked woocommerce_template_single_rating – 10
* @hooked woocommerce_template_single_price – 10
* @hooked woocommerce_template_single_excerpt – 20
* @hooked woocommerce_template_single_add_to_cart – 30
* @hooked woocommerce_template_single_meta – 40
* @hooked woocommerce_template_single_sharing – 50
*/
do_action( ‘woocommerce_single_product_summary’ );
?>
<div class=”custom_text”>*</i>Enjoy a powerfull zoom photo moving your mouse above it*</div>
<?php if(etheme_get_option(‘share_icons’) && $layout != ‘fixed’) echo do_shortcode(‘[share text=”‘.get_the_title().'”]‘); ?>
</div>
</div>
</div><!– Product information/ END –>

<?php
if($layout == ‘large’) {
?>
<div class=”<?php esc_attr_e( $infor_class ); ?>”>
<?php do_action( ‘woocommerce_after_single_product_summary’ ); ?>
</div>
<?php
}
?>
</div>

<?php

Thanks
Cheers
Chiara

#93309 Copied

Eva Kemp

Support staff

October 12, 2015 at 16:47

Hello,

You need edit this part of code
<div class="custom_text">*</i>Enjoy a powerfull zoom photo moving your mouse above it*</div> and add icon this way:
<div class="custom_text"><i class="fa fa-search-plus"></i> *Enjoy a powerfull zoom photo moving your mouse above it*</div>

Please try it.

Regards,
Eva Kemp.

#93341 Copied

Webacto

Participant

October 12, 2015 at 18:22

Solved!
🙂

http://lococostyle.com/product/arabesca-handmade-crochet-necklace/

Great

thank you

#93369 Copied

Eva Kemp

Support staff

October 12, 2015 at 18:41

Hello,

That’s great.

Let us know if there are any questions.

Regards,
Eva Kemp.

#93382 Copied
Viewing 11 results - 1 through 11 (of 11 total)