美文网首页
前端框架增加自定义fontIcons的方法

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

作者: 阿拉斯加南海岸线 | 来源:发表于2019-01-27 10:44 被阅读0次

在这里主要介绍的是阿里巴巴的矢量图标管理网站(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>

以上完!

相关文章

网友评论

      本文标题:前端框架增加自定义fontIcons的方法

      本文链接:https://www.haomeiwen.com/subject/vlsgjqtx.html