Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 19, 2015 at 6:57 pm #414745
    arcmktg

    Hello,
    I need to add add an icon from FontAwesome 4.1 to the Icon library in Enfold. It is not available on fontello. It is critical that we get this icon: http://fortawesome.github.io/Font-Awesome/icon/paw/
    Please advise,
    Thanks!

    March 19, 2015 at 7:01 pm #414749
    Yigit

    Hi arcmktg!

    Please add following code to Functions.php file in Appearance > Editor

    function fontawesome_css() {
	wp_enqueue_style( 'Font Awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'fontawesome_css' );

    and use the icon as following

    <i class="fa fa-paw"></i>

    Regards,
    Yigit

    March 19, 2015 at 7:55 pm #414789
    arcmktg

    Thanks for your swift reply!

    However, how can I use this icon inside the themes Icon list?

    March 20, 2015 at 11:12 am #415202
    Josue

    Hi!

    You’d need to use another approach to achieve that – https://vimeo.com/75743285

    Regards,
    Josue

    March 20, 2015 at 5:38 pm #415425
    arcmktg

    Thanks Josue,

    But as previously stated, the icon I need is not on Fontello. I need the Paw Print from FontAwesome 4.1

    Please advise.

    March 20, 2015 at 6:44 pm #415462
    arcmktg

    Update:

    I have recreated the list using raw HTML copied from “Inspect Element”. Then entered an image icon, used appropriate padding, and the final product looks great! Except, it lost it’s subtle fade in animation. Can anyone explain why?

    http://wp.dgpforpets.com/faq/

    March 21, 2015 at 2:04 am #415605
    Josue

    Hey!

    Try adding this code to your style.css:

    .avia_transform .avia-icon-list .iconlist_icon img{
opacity: 0.1;
-webkit-transform:scale(0.5);
-ms-transform:scale(0.5);
transform:scale(0.5);
}

.avia_transform .avia-icon-list .avia_start_animation .iconlist_icon img{
-webkit-animation: avia_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
animation:         avia_appear 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */
opacity: 1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}

    Cheers! 
    Josue

    March 28, 2015 at 10:39 pm #419924
    dusticelli

    @ Yigit

    I have tried that. Somehow, the font-awesome Icons are displayed in the backed inside the avia layout builder

    http://awesomescreenshot.com/08c4qw4aa5

    but not in the frontent.

    http://awesomescreenshot.com/0e24qw4hb3

    Chrome inspector shows the icon with 0px x 0px!

    http://awesomescreenshot.com/0b94qw4ndf

    Edit:
    [SOLVED] I have changend from inserting the snippet direct to the file via ftp. to inserting it via the Appearance > Editor, and as well I have pasted it into a different place inside the file. Now it works!

    Thx
    [/SOLVED]

    • This reply was modified 9 years, 8 months ago by dusticelli.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Importing Icon from Font Awesome’ is closed to new replies.