ICOMOON！強悍的WEB字體圖標制造器/Web字體使用實例

IcoMoon！一個可以通過個性化設置來創建自定義圖標（字體）的生成器！也可以將SVG圖片，轉換成web字體

IcoMoon是一項免費的服務，通過使用不同設置使我們能夠創建自定義的ICON圖或ICON字體。
當然了，網站也有資源打包下載！
包括大多數流行的免費圖標集（在its library里搜索），您可以挑選其中任何一個自己鍾意的圖標下載。
同時，它會提供兩種下載方式：圖片版和字體版！

圖片版是經過CSS Sprites技術處理的PNG格式，字體版有多種格式供我們選擇（EOT,SVG,WOFF,TTF）。
此外，除了其他設計師們設計的圖標，IcoMoon也有自己免費的海量圖標集，它們都非常贊。

網站地址: http://icomoon.io/app/

使用方式：

1.選擇圖標

2.下載字體庫，copy樣式

3.在項目中使用

@font-face {
    font-family: 'icomoon';
    src: url('../myfonts/icomoon.eot');
    src: url('../myfonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../myfonts/icomoon.woff') format('woff'), url('../myfonts/icomoon.ttf') format('truetype'), url('../myfonts/icomoon.svg#shejidaren') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon-qq:before {
    content: "\e900";
}
.icon-qq {
    font-family: icomoon;
    color: gray;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-size: 20px;
    display: inline-block;
    border: 1px solid gray;
    border-radius: 50%;
    transition: transform ease 0.2s;
}
    .icon-qq:hover {
        color: red;
        border: 1px solid red;
        cursor: pointer;
        transform: scale(1.1);
    }

   <span data-icon="qq" class="icon-qq"></span>

顯示結果：