Override Customizr FontAwesome

  • Hello,

    I have a custom set of Font Awesome icons that is a stripped down version of the one included with Customizr. It contains only the icons that I use on my website.

    Doing so has reduced the file size and the blocking time while loading the files, which has greatly helped initial loading of the site.

    However, every time the theme is updated, my files are overwritten. Is there a way I can load my custom Font Awesome woff2/svg files through my child theme? I imagine it requires me to deregister/dequeue the ones in the parent theme but I am not sure what their function is called or where I can find it in the theme files.

    I would appreciate any guidance.
    Thank you.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello! I have been using this theme for several years. in which folder path do you insert the file? if you followed a guide to create the lighter file can you share the link? I have seen your site and can also give you directions to get it to a better loading speed.

    Thread Starter synthesiamaniac

    (@synthesiamaniac)

    @mercurio32

    Here is the path to the webfonts folder where the FontAwesome icons are stored.
    customizr/assets/shared/fa/webfonts

    I opened the .woff2 files using FontForge and selected “compact” as the encoding. I then deleted any icon that I was not using on my site and saved the file. I then converted those modified .woff2 files into the other font formats.

    If you have any ideas for improving the loading speed, I would be happy to hear your ideas!

    you should try to create the same folder path in the child theme:
    customizr-child / assets / shared / fa / webfonts
    To speed up the site I use these plugins, already excellent in the free version:
    Autoptimize
    WP Fastest Cache
    Asset CleanUp: Page Speed Booster (to eliminate unnecessary uploads for a given page)
    You should get a score of 90+ on google pagespeed

    I inquire about FontForge that I don’t know, I would like to be able to remove all the icons that are not needed and add some that I need.

    Thread Starter synthesiamaniac

    (@synthesiamaniac)

    @mercurio32

    I have created the path but WordPress does not read the files. A child theme only reads the PHP files, from what I understand, which is why I am trying to deregister the files in the parent theme and register them in their new location in the child theme.

    I use a caching plugin and Autoptimize already.

    With FontForge you can delete icons and I believe add them as well. However, you would likely need to edit the CSS or Javascript files to add references to the new icons.

    You could possibly get away with replacing one icon with one of the new ones and using the old reference name to embed it into your site.
    For example, replacing the envelope icon with a house icon, but still using the fas fa-envelope reference. It could get very confusing.

    I created new files with new icons placed in place of some to test and it works. But it seems that I have the same problem as you, in the child theme entering the path is not good. It only works if I overwrite existing files. I saw the css that recalls the fonts of the file and maybe a “redirect” from the style.css of the child theme that leads to the new fonts should be done. I’m not that experienced to know how to do it, hopefully someone will help us ??

    PS: to make the icon kit with all formats: eot; svg etc. I analyzed the font code and I saw that they were created with Fontello, an excellent tool.

    Thread Starter synthesiamaniac

    (@synthesiamaniac)

    @nikeo
    Any ideas on how to do this?
    Your input would be greatly appreciated.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Override Customizr FontAwesome’ is closed to new replies.