[Resolved] How to install Fontello icon

Home Forums Support [Resolved] How to install Fontello icon

Home Forums Support How to install Fontello icon

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #465872
    Kai-Yen

    Hi all Generatepress lover,

    I created a few of customized icons from Fontello and download a zip file including css, font and .json.
    What should I do to add these icons to a menu?
    Could someone give me some hacks?

    I have followed the guidance > https://css-tricks.com/snippets/css/using-font-face/, and it doesn’t works.

    #465993
    Leo
    Staff
    Customer Support

    Hi there,

    Would this help? https://docs.generatepress.com/article/adding-custom-font/

    If not does Fontello provided any instructions?

    #467224
    Kai-Yen

    Hi Leo,

    I found someone shared an instruction.
    But, generatepress folder doesn’t have a font folder.

    ——————————————————————————————–
    Move the font folder into your project. Your project might look something like this:

    /project-root
    — /stylesheets
    — /images
    — /javascripts
    — /font
    Include the Fontello css. Inside the “css” folder in the bundle, you’ll see:

    [yourfontname]-codes.css
    [yourfontname]-embedded.css
    [yourfontname]-ie7-codes.css
    [yourfontname]-ie7.css
    [yourfontname].css
    For most cases, you will only need [yourfontname].css. Include that stylesheet in your project.

    Inside [yourfontname].css is the @font-face rule that imports the font. Make sure the paths to the fonts are pointing to the right place. By default, they will look in ../font/.

    To use your icons, add class=”icon-ICON_NAME” to an element that you want to have an icon. You can see the list of icon names at the bottom of [yourfontname].css.

    Optional: Fontello puts a margin-right: .2em on the icon because it expects you to use the icon with text, but sometimes you might want a standalone icon. I like to use <i> tags for standalone icons, so I add the following rule to the bottom of the fontello css:

    i[class^=”icon-“]:before, i[class*=” icon-“]:before {
    margin: 0;
    }
    Now if you put class=”icon-ICON_NAME” on an <i> tag, it will not have any unwanted margin.
    ——————————————————————————————–

    #467743
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You would need to upload the font files into your child theme: https://docs.generatepress.com/article/using-child-theme/

    That way you can create your own fonts folder.

    #468421
    Kai-Yen

    Hi Tom,

    Thanks for your answer. I am able to make 50% of my wish, and these icons render as a box.

    It seems to need some steps to get right.

    So I am wondering whether lightweight social icon customisable to upload any icons.

    #468520
    Leo
    Staff
    Customer Support

    What icons are you looking for?

    Perhaps FontAwesome is an option? http://fontawesome.io/icons/

    #468885
    Kai-Yen

    Hi Leo,

    I need LINE message icon shown below, which is not avaiable on forntawesome.

    #468929
    Leo
    Staff
    Customer Support

    Hmm unfortunately it’s not possible to customize LSI.

    Maybe just use an image?

    #469009
    Heiko

    Tried this?

    1. Copy your files in your child theme.
    2. Open functions.php from you childs theme and add

    function wp_load_fontello() { 
    wp_enqueue_style( 'wp-fontello', get_stylesheet_directory_uri() . '/css/[yourfontname].css' );
     
    }
    add_action( 'wp_enqueue_scripts', 'wp_load_fontello' );
    #469107
    Kai-Yen

    Hi Heiko,

    I found another solution. Add [yourfontname]-embedded.css into theme css, then icons show on my website.
    However, did you add those code to functions.php?

    function wp_load_fontello() { 
    wp_enqueue_style( 'wp-fontello', get_stylesheet_directory_uri() . '/css/[yourfontname].css' );
     
    }
    add_action( 'wp_enqueue_scripts', 'wp_load_fontello' )
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.