0

I want to add some custom font icons in my project. Because default icons in bootstrap is not enough. How to create custom font icons in bootstrap?

Ramesh Murugesan
  • 4,727
  • 7
  • 42
  • 67

3 Answers3

1

How to create custom font icons (and glyph names) from existing fonts

  • Obtain the font you want to use from free sources, such as http://fontello.com/ ; or create/modify a font using a library such as https://fontforge.github.io/en-US/ - which you can also use to rename your font, add your own copyright, or re-generate the font id.

  • You can either read the glyph-names and glyph-codes from the font itself by using a library such as: https://github.com/PhenX/php-font-lib and (optionally) save the information in JSON or CSS   -OR-   you can edit the accompanying CSS file you got with your font, bulk replacing the font-family-name and font-class-names you want -in your favorite text editor.

  • Use the appropriate @font-face sources as indicated, however, woff is a widely supported.

  • Remember to maintain the correct glyph-codes (usually unicode) corresponding to the glyph-names you assign in the CSS -which you can either generate once and save as a CSS file, -or generate on-the-fly with JavaScript and inject into the DOM <head> as <style>.

You can edit (or create) your CSS to recognize your glyph classes in a way that you do not need to use duplicate words such as icon icon-smile like this:

Icon-fonts CSS for using shorter class-names

@font-face
{
    font-family: 'Some_Font';
    src: url('fnt/Some_Font.woff?v=0.1.0') format('woff');
}

[class^="icon-"]:before, [class*=" icon-"]:before
{
    font-family: "Some_Font";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-smile:before{content:'\eAA0';}

Now you can simply use your custom glyphs without duplicating the font-name like this:

<i class="icon-smile"></i>

Use your own discretion when naming your fonts and classes.

1

Try icomoon which lets you create our own custom font icons using plain svg files.

For a full explanation see https://impressto.net/creating-font-icons

Peter Drinnan
  • 4,344
  • 1
  • 36
  • 29
0

Fontcustom will help to generate custom icon webfonts from the comfort of the command line. Your icons should be in svg format.

  • Installation:

    sudo apt-get install fontforge wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip unzip woff-code-latest.zip -d sfnt2woff cd sfnt2woff make sudo mv sfnt2woff /usr/local/bin/ gem install fontcustom

  • Steps to create font icons

    1. copy all the svg file in a single directory.
    2. execute fontcustom config /path/to/vectors . It will Generate .yml file
    3. execute fontcustom compile /path/to/vectors. It Generate app directory with font and stylesheet.
Ramesh Murugesan
  • 4,727
  • 7
  • 42
  • 67