Custom icon fonts

Develop, Build & Integrate CMS Development
1

Hi,

I noticed that I could create an icon field to allow content editors to choose from a font awesome icon. This is great, and I also noticed that you could choose between 2 font awesome versions.

One of our clients has their own custom icon font. Would it be possible for us to configure the icon field to use the custom icon font in stead of the provided font awesome? If so, how could this be acomplished?

Thanks

2

Hi @PDeT ,
If you want to use custom font awesome then you have to add their CSS file or CDN in your theme base file or in the module. and you can use the text field to add the icon class.

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

3

Hi, that certainly counts as a workaround, but the issue with this is that the editor needs to know the icon text, whereas with an icon field they can browse the available icons. But if there is currently no other way, I’ll do with the workaround thx!

4

Hi @PDeT,

you can’t configure default modules.

But creating a custom module for custom icons is quite simple.

The only things you’d need are:

  • text field(not rich-text) or a dropdown(If you’d like to limit the module to certain icons). I’ll call it “icon name”
  • a bit of HTML

The default layout of the module should be:

<i class="fal fa-{{ module.icon_name }}"></i>

That’s it :grinning_face:

If you’re going the text-field way the user will need to put the icon name without “fa-” into the field like
heart, house…

Of course you can add a ton of options here like

  • changing the “icon weight”
  • changing the sizes
  • and what ever you’d like to do

for the icon weight:

My personal favorite is to create a select option with the names and the associated values.

E.g:

Name / Value

Thin / fal

Regular / far

Solid / fas

Duo / fad

If you’d like to use something completly different like material icons this is the way to go

best,

Anton

5

dude said “simple” lol