Fontello fonts import into theme

Hello,

Can you please mention how are you adding the fontello font to the social menu? Try to add your custom font in the plugin file by editing it and follow the link to add a custom font to the oceanwp theme – https://docs.oceanwp.org/article/128-how-to-add-custom-fonts

Hi,

I put webfont packages into /oceanwp/assets/fonts since font awesome is stay at this location too.

Then, in functions.php I added these lines to simply test:

// Smile icon
$array[‘smile’] = array(
‘label’ => ‘Smile’,
‘icon_class’ => ‘fa icon-emo-happy’,
);

The problem comes from icon_class, can’t find where it refers. It is an icon only and I want it to be in social menu like other icons(fb, instagram) where if this is works, I am able to put other custom icons.

I thought the way of putting custom fonts like what your document provided but I’m afraid that is only affect typography, not icons for menu. Can you teach how to add into icon_class with above steps?

Thanks.
JY

In the above code, just replace the icon class fa icon-emo-happy with your fontello icon class. Do you have fontello icons, right? then you should have associated class with the icons. You will see it under fontello css file.

• This reply was modified 5 years, 8 months ago by Amit Singh.

Hi,

Thanks for reply. I imported @fontface to child theme, and download another example to test, but it only shows square pattern. The fa class must written to show up placeholder but this class font family is belongs to ‘Font Awesome 5 Free’, where the fontello has its own font family too.

Fontello got its own package consists of config.json, css folder, and fonts folder. Should all this put in the correct place? or is fine to put in one directory?

The icon-emo-happy is the class of that icon.

I can definitely feel the solution is very near now, please teach me. The link has updated to lookout.

Thank you.
JY

Please try to use the icon-emo-happy instead of the font-awesome icon class. Remove the font awesome class completely. See it works or not after clearing the cache.

Hi,

I changed to put icon-emo-happy only but is still showing unknown icon only, the code is on site. Is it possible there is a need to include the file in header? I can provide the icon package to let you check but I don’t know about post it to here.

Thank you and sorry for troubling you.
JY

Can you please tell me what is your fontello font family name? Try adding the font-family in the style.css file of the child theme and it will work. For example –

span.icon-emo-happy {
    font-family: fontello-font-family-name;
}

Hi,

I added the code with this:

span.icon-emo-happy {
  font-family: 'fontello';
}

It now shows the font family of this icon but still can’t detect icon. For in-case, I put these lines in style.css child theme too because it comes with the package together:

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?76189964');
  src: url('../font/fontello.eot?76189964#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?76189964') format('woff2'),
       url('../font/fontello.woff?76189964') format('woff'),
       url('../font/fontello.ttf?76189964') format('truetype'),
       url('../font/fontello.svg?76189964#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

Thank you.

JY

That’s odd. Do you have a pro plan? It is very difficult the check the issue without seeing the site settings. Our support is very limited here. Hope you understand it.

Hi,

Sadly, this site doesn’t have pro plan. If in this case, I will give up and find alternative way of design as budget is not on my watch.

I have one last clue though, that this icon package comes with a json file, don’t know whether is essential. Here the code:

{
  "name": "",
  "css_prefix_text": "icon-",
  "css_use_suffix": false,
  "hinting": true,
  "units_per_em": 1000,
  "ascent": 850,
  "glyphs": [
    {
      "uid": "c64623255a4a7c72436b199b05296c4f",
      "css": "emo-happy",
      "code": 59392,
      "src": "fontelico"
    }
  ]
}

Thanks for the support on these few days.