Limit icon loading

Created on 24 August 2024, 4 months ago
Updated 18 September 2024, 3 months ago

Problem/Motivation

Looks like the whole font library is being loaded, I am looking for a way to only load the configured icons.

✨ Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States mortona2k Seattle

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mortona2k
  • Assigned to mahyarss
  • 🇵🇱Poland mahyarss

    Just to clarify, are you asking about limiting the loading of specific Font Awesome styles (e.g., solid, regular, brands), so that only the styles you need are loaded? This would help reduce the amount of resources being loaded on your site.

    If this is not what you meant, could you please provide a bit more detail or clarify your request? Understanding exactly what you're looking for will help us better address your needs.

    Looking forward to your response!

  • 🇺🇸United States mortona2k Seattle

    Yep that's exactly right. Currently the whole icon library is loaded so that any icon on the page can be shown.

    However, I am using it for UI elements and only need to have a few icons.

    I like the icon customization interface! I'm looking for an option to have those configured icons be the only ones loaded.

    Alternatively I would have to do this as a front end build step.

  • 🇵🇱Poland mahyarss

    Have you checked the settings for limiting the library files being loaded? You can find these settings in the module configuration:

    1. Navigate to: /admin/config/user-interface/fontawesome.
    2. In the settings form, under the "Usability" section, go to the "Files" tab.
    3. Disable the "All styles" option.
    4. You’ll see a list of individual file components (Font styles) that you can selectively enable for loading, depending on your needs.

    Additionally, I recommend using the latest Dev version I released today, which includes a new "custom-icons" option under the "Files" section.

    To use custom icons, you can place your custom icon files in the library installation directory at libraries/fontawesome:

    • For CSS: libraries/fontawesome/css/custom-icons.css
    • For JavaScript/svg: libraries/fontawesome/js/custom-icons.js



    It’s also advisable to create a minimized version of your file:

    • libraries/fontawesome/css/custom-icons.css
    • libraries/fontawesome/css/custom-icons.min.css



    Based on your description, I believe this solution should meet your needs. However, if I’ve misunderstood, please provide more details about your custom files/icons, and feel free to attach your file if possible.

  • 🇺🇸United States mortona2k Seattle

    Oh cool, I'll check again next time I get into this.

  • Status changed to Fixed 3 months ago
Production build 0.71.5 2024