How to install Fontello icon

Hi there,

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

If not does Fontello provided any instructions?

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.
--------------------------------------------------------------------------------------------

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.

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.

What icons are you looking for?

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

Hi Leo,

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

Hmm unfortunately it's not possible to customize LSI.

Maybe just use an image?

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' );

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' )