Best Practice using Glyphicon Halflings Font

Hello Webflow Team & Community,
I’ve bought the Glyphicon font license, so I can use @font-face with absolute URLs.

I’ll like to know if there is a best practice for using this font such as:

  • How to call it
  • Which element to use so it replaces it with the icon

I’ve done the following and worked but I’ll like to know a best practice for these:

  • Used @font-face and declare all the character classes at the Custom Code module.
  • Used span within my text to asign the class and get the icon that I like.
  • When using span I’ve had to add a character, but once I publish the site, the icon shows + the additional character.

Thank you in advanced for your help.

@adlpp have you uploaded the font into the custom fonts library within the site settings?

Upload the font and then you’ll be able to select it from the fonts field when using any text element. :smile:

I haven’t tested uploading an icon font, but it should work just like that.

Let me know if you have any trouble and would love to see the final outcome of the site you’re using the icons on. :smile:
Thanks,

Waldo

Hey Waldo, thank you for your response but unfortunately that doesn’t work as expected. That was my first try but whenever I select the glyphicon font, I don’t get the icons but instead I get “normal” characters: a b c d … z

I hope someone else has the answer for this.

Cheers!

Hi @adlpp, can you share the read-only link to your site: Share a read-only link | Webflow University and the link to the published site as well ?

Also, did you get some kind of entity character map or some character map to show the different icons for different characters ?

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.