前端框架增加自定义fontIcons的方法

在这里主要介绍的是阿里巴巴的矢量图标管理网站（Iconfont.cn），它也是国内首家推广Webfont形式图标的平台。Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。在这里分三点进行说明。

一、图标制作制作

设计师同学可以根据官方提供的设计规范进行制作，工具是AI，制作完成导出的时候需要另存为SVG格式。
制作完成就需要进行下一步上传操作。

二、个人图标管理

Iconfont.cn支持设计自己上传图标、收藏图标以及管理项目图标。

1、上传图标

在iconfont.cn平台的导航上有一个[图片上传失败...(image-e97543-1548557083453)] <span style="text-decoration:underline;">上传图标</span> 入口，点击该入口进入上传流程，选择您要上传的SVG格式图标。
由于图标存在iconfont.cn平台上搜索需要通过关键词和tag才能查询到图标，所以在上传图标的时候需要命名图标的名字和定义图标的tag。

2、管理图标

打开首页导航的‘图标管理’按钮，进入图标管理界面，以供查看“我上传的图标”、“我收藏的图标”、“项目管理图标”、“我的公开图标库”等分类。
用户可以在这里上传删除图标，收藏图标，进行图标的分类管理。图标分类管理是为了在实际项目中应用，这也是这篇博客的重点。

三、图标应用

fontIcons对于前端应用来说有很多便捷：

  1. 只有变化大小；
  2. 自由改变颜色；
  3. 可以添加一些视觉效果，如阴影、旋转、透明度等等css3效果；
  4. 兼容IE6。

下面介绍图标应用的步骤：

1、搜索图标

搜索找到自己需要的图标，点击会进入右上角的购物车中（可多选），见下图
[图片上传失败...(image-87cc37-1548557083453)]

2、项目管理

点击存储为项目,输入项目名称,如"mui-icon-add",点击存储后,会跳转到项目管理页面.


项目管理

3、下载字体

点击下载到本地,会将合并后的字体文件和自动生成的css文件全部下载到本地.


字体文件

4、修改css

默认的如下:
<pre class=" prettyprint css prettyprinted"><code><span class="lit">@font</span><span class="pun">-</span><span class="pln">face </span><span class="pun">{</span><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="str">"iconfont"</span><span class="pun">;</span>
<span class="pln">
src</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'iconfont.eot'</span><span class="pun">);</span><span class="pln"> </span><span class="com">/* IE9/</span>
<span class="pln">
src</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'iconfont.eot?#iefix'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'embedded-opentype'</span><span class="pun">),</span><span class="pln"> </span><span class="com">/ IE6-IE8 /</span>
<span class="pln">
url</span><span class="pun">(</span><span class="str">'iconfont.woff'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff'</span><span class="pun">),</span><span class="pln"> </span><span class="com">/ chrome、firefox /</span>
<span class="pln">
url</span><span class="pun">(</span><span class="str">'iconfont.ttf'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'truetype'</span><span class="pun">),</span><span class="pln"> </span><span class="com">/ chrome、firefox、opera、Safari, Android, iOS 4.2+/</span>
<span class="pln">
url</span><span class="pun">(</span><span class="str">'iconfont.svg#iconfont'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'svg'</span><span class="pun">);</span><span class="pln"> </span><span class="com">/ iOS 4.1- */</span>
<span class="pln">
</span><span class="pun">}</span>
<span class="pln">
</span>
<span class="pln">
</span><span class="pun">.</span><span class="pln">iconfont </span><span class="pun">{</span>
<span class="pln">
font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="str">"iconfont"</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;</span>
<span class="pln">
font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">16px</span><span class="pun">;</span>
<span class="pln">
font</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">normal</span><span class="pun">;</span>
<span class="pln">
</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">smoothing</span><span class="pun">:</span><span class="pln"> antialiased</span><span class="pun">;</span>
<span class="pln">
</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">text</span><span class="pun">-</span><span class="pln">stroke</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.2px</span><span class="pun">;</span>
<span class="pln">
</span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">osx</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">smoothing</span><span class="pun">:</span><span class="pln"> grayscale</span><span class="pun">;</span>
<span class="pln">
</span><span class="pun">}</span>
<span class="pln">
</span>
<span class="pln">
</span><span class="pun">.</span><span class="pln">icon</span><span class="pun">-</span><span class="pln">nanzhuang</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> </span><span class="str">"\e600"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span>
<span class="pln">
</span>
<span class="pln">
</span><span class="pun">.</span><span class="pln">icon</span><span class="pun">-</span><span class="pln">nvzhuang</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> </span><span class="str">"\e601"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span>
<span class="pln">
</span>
<span class="pln">
</span><span class="pun">.</span><span class="pln">icon</span><span class="pun">-</span><span class="pln">gouwuche</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> </span><span class="str">"\e602"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span>

</code></pre>

我们可稍作修改,

  • 为保证和框架目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性；
  • 字体文件类名需要和其他字体文件保持一致，方便调用。
  • 只兼容iOS和Android版本的话，我们仅需要ttf格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；

修改后的代码如下:

<pre class=" prettyprint css prettyprinted"><code><span class="pln"> </span><span class="lit">@font</span><span class="pun">-</span><span class="pln">face </span><span class="pun">{</span><span class="pln">font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="str">"iconfont"</span><span class="pun">;</span>
<span class="pln">
src</span><span class="pun">:</span><span class="pln">url</span><span class="pun">(</span><span class="str">'../fonts/iconfont.ttf'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'truetype'</span><span class="pun">);</span><span class="pln"> </span><span class="com">/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/</span>
<span class="pln">
</span><span class="pun">}</span>
<span class="pln">
</span>
<span class="pln">
</span><span class="pun">.</span><span class="pln">iconfont </span><span class="pun">{</span>
<span class="pln">
font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="str">"iconfont"</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;</span>
<span class="pln">
font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">16px</span><span class="pun">;</span>
<span class="pln">
font</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln">normal</span><span class="pun">;</span>
<span class="pln">
</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">smoothing</span><span class="pun">:</span><span class="pln"> antialiased</span><span class="pun">;</span>
<span class="pln">
</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">text</span><span class="pun">-</span><span class="pln">stroke</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.2px</span><span class="pun">;</span>
<span class="pln">
</span><span class="pun">}</span>
<span class="pln">
</span>
<span class="pln">
</span><span class="pun">.</span><span class="pln">icon</span><span class="pun">-</span><span class="pln">nanzhuang</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> </span><span class="str">"\e600"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span>
<span class="pln">
</span>
<span class="pln">
</span><span class="pun">.</span><span class="pln">icon</span><span class="pun">-</span><span class="pln">nvzhuang</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> </span><span class="str">"\e601"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span>
<span class="pln">
</span>
<span class="pln">
</span><span class="pun">.</span><span class="pln">icon</span><span class="pun">-</span><span class="pln">gouwuche</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln"> content</span><span class="pun">:</span><span class="pln"> </span><span class="str">"\e602"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span>

</code></pre>

将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在框架中引用刚生成的字体图.
以mui框架为例，新增的字体应用在标签内代码如下：

<span class="mui-icon iconfont icon-nanzhuang"></span>

以上完！

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343

推荐阅读更多精彩内容