Adding Custom Icons

Created on 11 January 2023, almost 2 years ago
Updated 21 January 2023, almost 2 years ago

Hello!

Is there a simple way to add custom fonts (e.g. from fontello) to the theme? We only need a handful of icons and dont want to install a new module just for that or hundreds of icons.

We added the css files from fontello in to the folder web/themes/contrib/dxpr_theme/css and the files from the fontello font folder into web/themes/contrib/dxpr_theme/fonts. we tried placing the eot, woff and woff2 files directly into the fonts/folder and tried also fonts/fontello. Cleared the cache, but the icons are not showing up when adding in a views header (unrestricted html). also didnt work after changing the url paths in fontello.cass from

src: url('../font/fontello.eot?66906366'); to
src: url('../fonts/fontello.eot?66906366');

any ideas?

💬 Support request
Status

Closed: works as designed

Version

5.0

Component

Code

Created by

🇦🇹Austria coreteamvn

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇦🇹Austria coreteamvn

    One way to do is:

    1) download/get icons (e.g. from fontello), the zip files contain css and font folder
    2) upload the folder to dxpr_theme/fonts (so you have fonts/fontello/css/fontello.css)
    3) in the dxpr_theme.info.yml file add 'dxpr_theme/fonts' as library:

    - libraries:
      - 'dxpr_theme/global-styling'
      - 'dxpr_theme/fonts'

    4) in dxpr_theme.libraries.yml add

    fonts: 
        css:
            theme:
                fonts/fontello/css/fontello.css: {}
            

    Now the custom icons from fontello show up (after cache clearing and making sure the text field where icons are used are set to full html)

Production build 0.71.5 2024