Skip to main content

Icon Fonts Libraries

official icon fonts for PurgeTSS

Previous versions of PurgeTSS included several icon fonts libraries such as Bootstrap Icons, Boxicons, LineIcons, and Tabler Icons. However, adding more icon fonts was getting out of control.

As a result, we have decided to leave the following fonts as the official icon fonts for PurgeTSS:

Recreating the deleted libraries​

The good news is that you can recreate them using the build-fonts command:

1. Download the libraries​

Start by downloading the libraries from their official websites:

2. The fonts folder​

Put the desired libraries in the ./purgetss/fonts folder

info

You just need to copy the TrueType or OpenType font files and the .css file.

./purgetss/fonts/
purgetss
└─ fonts
   └─ boxicons
      ├─ boxicons.css
      └─ boxicons.ttf
   └─ lineicons
      ├─ lineicons.css
      └─ lineicons.ttf

3. The build-fonts command​

Run the build-fonts command to create a custom fonts.tss file.

$ purgetss build-fonts [--modules]

# alias:
$ purgetss bf [-m]

The fonts.tss file​

The build-fonts command will generate a custom ./purgetss/styles/fonts.tss file with all the unicode characters and style rules.

./purgetss/syles/fonts.tss
'.boxicons': { font: { fontFamily: 'boxicons' } }
'.lineicons': { font: { fontFamily: 'LineIcons' } }

// Unicode Characters
// To use your Icon Fonts in Buttons AND Labels each class sets 'text' and 'title' properties

// boxicons.css
'.bxl-meta': { text: '\uef27', title: '\uef27' }
'.bx-lemon': { text: '\uef28', title: '\uef28' }
'.bxs-lemon': { text: '\uef29', title: '\uef29' }
// ...

// lineicons.css
'.lni-500px': { text: '\uea03', title: '\uea03' }
'.lni-add-files': { text: '\uea01', title: '\uea01' }
'.lni-adobe': { text: '\uea06', title: '\uea06' }
// ...

Renaming the style rule name​

PurgeTSS will use the font's file name as the style rule name. You can change it by renaming the font file.

./purgetss/fonts/
# Root of the project
purgetss
└─ fonts
   └─ boxicons
      └─ bx.ttf

New style rule name: '.bx'

./purgetss/syles/fonts.tss
// new style rule name
'.bx': { font: { fontFamily: 'boxicons' } }

The assets/fonts folder​

The build-fonts command will copy the font files to ./app/assets/fonts folder and rename them to their corresponding PostScript name to work on both iOS and Android apps.

./app/assets/fonts/
app
└─ assets
   └─ fonts
      ├─ boxicons.ttf
      └─ LineIcons.ttf

The --modules option​

When using the --modules option, it will generate a ./app/lib/purgetss.fonts.js CommonJS module file

./app/lib/purgetss.fonts.js
const icons = {
  // boxicons
  'boxicons': {
    'bxlMeta': '\uef27',
    'bxLemon': '\uef28',
    'bxsLemon': '\uef29',
    // ...
  },
  // lineicons
  'lni': {
    '500px': '\uea03',
    'addFiles': '\uea01',
    'adobe': '\uea06',
    // ...
  }
};
exports.icons = icons;

The --prefix option​

PurgeTSS automatically determine the group's prefix for each icon family and class name. However, you can use the --prefix option to apply the style's filename as the prefix for class names in fonts.tss and property names in purgetss.fonts.js.

./purgetss/fonts/
purgetss
└─ fonts
   └─ lineicons
      └─ li.css

New group prefix: li

./purgetss/syles/fonts.tss
// lineicons/li.css
'.li-zoom-out': { text: '\uea02', title: '\uea02' }
'.li-zoom-in': { text: '\uea03', title: '\uea03' }
'.li-zip': { text: '\uea04', title: '\uea04' }
// ...
./app/lib/purgetss.fonts.js
const icons = {
  // lineicons/li.css
  'li': {
    // ...
  },
  // ...
};
exports.icons = icons;
WARNING

Make sure that the new prefix remains unique and avoid conflicts with other class prefixes.