F7 Icons Not Displaying

I am able to get the default F7 icons to display (back, forward, prev and next) but not the install-able ones.

Here’s the html:

image

They are rendering as the word “house” instead of using the ligatures feature: https://framework7.io/docs/icons.html

I’m seeing the files in the project folder

image

Here are the paths in the css file:

And the css file is referenced in the head of the page:

The default color is white, so make sure you are not on a white background, or add a text color class to change its color and see if that solves.

If that isn’t it, what is showing in the rendered browser view? I tend to use the browser platform of fw7 for debugging this type of stuff.

I changed the background to black and font color to white and it’s not showing anything.

I’m not sure I fully understand. In the Wappler preview mode view in the editor it shows the literal word “house”. In a Chrome browser running on localhost nothing displays.

You want to look for any errors indicating the css didn’t load, etc. And then look at the element code itself so you can debug what is actually happening. For example, here is what an fw7 icon looks like when working…what is your showing in the chrome debugger?

Screen Shot 2020-02-28 at 11.39.09 AM

1 Like

Hmmm. It seems like it’s being loaded.

html:

CSS

For those of you running across this problem.

Go to https://github.com/framework7io/framework7-icons and download the repository.

Expand and then replace the font files in your project /dmxFramework7_icons/fonts with the downloaded fonts found in folder package/fonts.

All icons on the cheat sheet will now show up.
https://framework7.io/icons/

@George @patrick please can you update the font files to the latest one as above so when a new F7 project is created it has the newer working fonts.

Thanks