Skip to content

Adding new fonts to the UI

Conor Haining edited this page Dec 21, 2020 · 3 revisions
  1. Go to Fontello.

  2. You need to reselect all the existing icons that are being used.

  3. Go to then customise names tab and make sure they match what's already in the style.scss, if they don't match then make fontello match what's already there. We do this because the icons are already being used in the HTML so you'd need to update all the uses if the class names changed. You can find the icon names in the stylesheet which are prefixed by .icon-

  4. Don't worry about changing the codes, that's fine as long as the CSS classes match.

  5. Press download webfont, copy the items from the /font folder into /src/asset/font

  6. Go to the css folder in the downloaded folder, and look at just the fontello.css file, you should be able to copy and paste that into where the existing font stuff is in the src/styles.scss

  7. Save the config.json from the downloaded folders as fontello.config.json in the root of the UI folder.

Icon Conventions

  • Use filled versions of icons, not outlines, where possible.
Clone this wiki locally