How to create custom font icons?

问题

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?

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/29255773/how-to-create-custom-font-icons

标签

twitter-bootstrap

fonts

font-awesome

webfonts