ICOMOON！强悍的WEB字体图标制造器/Web字体使用实例

Posted 2020-07-28 天马3798

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>

显示结果：