iconfont使用

程枫 edited this page Jul 23, 2015 · 7 revisions

frozenui中的iconfont

最新版本的frozenui使用iconfont替代图片来展示图标,使图标的使用更轻量,更灵活。

提供两个版本的iconfont文件,iconfont.ttf和iconfont-full.ttf。

iconfont.ttf:

iconfont

iconfont-full.ttf:

iconfont2

其中iconfont.ttf只包含了其他组件需要使用的icon文件,iconfont-full.ttf是包含目前frozenui所有图标的文件。 使用参考demo:http://frozenui.github.io/frozenui/demo/icon.html

项目中使用iconfont

  1. 不需要这么多icon的情况

    对性能要求较高,不需要所有icon时,可以在http://iconfont.cn/search?q=frozenui 选择自己需要的icon放到自己的项目中。

  2. 需要新增icon

    按照网站的帮助制作svg文件,上传到http://iconfont.cn/icons/uploadShow ,选择需要的icon放入自己的项目中。

注意unicode码需要改成f开头,e开头在有些小米机器上不显示。可以使用百度的字体工具http://font.baidu.com/editor/ 设置代码点统一修改,可以导出ttf也可以使用预览生成的base64,一个项目实例:

@font-face {
    font-family: "c-iconfont";
    src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype'); 
}
@mixin c-icon{
    font-family: "c-iconfont" !important;
    font-size: 32px;
    line-height: 32px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    display: block;
    color: #fff;
}

$icon-unfold:       "\f600"; 
$icon-collect:      "\f601"; 
$icon-like:         "\f602";
$icon-liked:        "\f603";
$icon-comment:      "\f604";
$icon-collected:    "\f605";
$icon-download:     "\f606";
$icon-display:      "\f607";
$icon-up:           "\f608";
$icon-down:         "\f609";

.icon-unfold:before {
    @include c-icon;
    content: $icon-unfold;
}

如何把矢量图做成iconfont

  1. 选中psd中的形状图层,导出路径到ai,或者选中形状,复制

1

  1. 打开ai,新建一个64px* 64px的空白画板

2

  1. 将上面导出的ai文件打开,全选复制路径,粘贴到空白画板中

3

  1. 涂黑

4

会变成这样

5

  1. 针对镂空的图需要选中所有路径,然后选中效果中的路径查找器,点击差集的选项即可完成镂空

6

  1. 一些路径有互相交叉的情况,可能就需要用到路径选择器中的联集等选项,最后生成的形状必须是没有交叉的。

10

操作后:

11

有些需要删除一些锚点,多调试几次即可。

  1. 有些图是描边的,描完之后还不行,会发现路径并不在轮廓上

7

这时需要用到对象-路径-轮廓化描边

8

做完操作后会发现圆环内外有两条路径了,ok

9

  1. 保存为svg格式再上传到http://www.iconfont.cn/icons/uploadManage 上即完成。
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.