Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #414745

    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!

    #414749

    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

    #414789

    Thanks for your swift reply!

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

    #415202

    Hi!

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

    Regards,
    Josue

    #415425

    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.

    #415462

    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/

    #415605

    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

    #419924

    @ 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 5 years, 2 months ago by  dusticelli.
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Importing Icon from Font Awesome’ is closed to new replies.