CSS customization of Default theme makes icons disappear

Hello everyone :slight_smile:

I am working for a french library specialized in archaeology, and I would like to use the Default theme to customize it, add background images, and so on.

I first wanted to change font into Lato, as shown in the Documentation (https://omeka.org/s/docs/developer/themes/modifying_themes/). I added the code in layout.phtml and replaced font-family:“Open Sans” by font-family:“Lato” (and I added font-weight:300).

It worked like a charm and changed the font, but it also made the little icons disappear (the magnifying glass of the search bar has been replaced by a square with numbers in it like “F1” or something). Is it because the icons were generated with Open Sans ?

Do you have any idea how I could fix this ? Am I doing something wrong ?

Thank you for you help

Did you make other changes to layout.phtml? There’s an “iconfonts” css file loaded by the normal default theme that should make the icons work.

I didn’t touched the iconfonts.
That being said, I just read that changing codes directly in the theme’s CSS file is not recommended, whereas that is what I was doing at first.

Do I really need to download all my site’s folder and to use Node and Gulp to change CSS ? I’ve never done this before I’m a bit scared of making mistakes…

You don’t have to install Gulp and do things that way if you don’t want to. That’s really only required if you’re making changes with an eye to submitting them back for inclusion in the theme. Or if you’re more comfortable working with Sass.

Did you change any other font-family declarations in the CSS? Or just “Open Sans” ones?

I’m relieved I can do things an easy way.

Yes I also changed the “Font Awesome 5 free” and I just realized it’s not a font style but a set of icons ! I guess that is why it’s not working ?

Everything works now, thank you so much for your help :slight_smile: