首先你要有一个图标库的账号,我们使用的是阿里矢量图标库,其次你要有一套已经设计好的图标原图。如果你具备了这些,就可以和我一起看iconfont的使用姿势了。

写在前面

  1. 不结合其他矢量库或UI框架一起使用的方法,可以参照官网的指示进行操作:http://iconfont.cn/plus/help/detail?helptype=code 也可以在稍后下载到本地的官方demo中学习如何使用。
  2. 如果结合其他矢量库一起使用则有一些需要注意的问题和一些操作。我们的项目是用的ant design,因此本文记录和ant design结合使用

使用方法:

1. 登录账号并找到我的项目

如果还没有自己的项目,点击添加项目

如何上传图标请参照官网进行操作,可以由设计师直接上传也可以由程序员上传。
http://iconfont.cn/plus/help/detail?helptype=about

要点说明:

新建项目时FontClass/Symbol前缀Font Family字段的填写很重要,后面会讲解用途

2.将图标下载到本地

你会得到如下文件:

其中demo.cssdemo_fontclass,demo_symbol,demo_unicode详细演示了三种的使用方法。

要点说明:

如果和ant design结合使用,这个前缀一定要写为anticon,因为在使用其图标写法时会自动给图标加上anticon前缀。如下图官网描述:

3. 整合进项目中

首先将下载的图标文件放进项目相应静态文件夹中。
我们使用的是fontclass方式,因此,需要在整个项目的css中引入iconfont.css
然后想要拓展ant design的图标库就需要看一下它是如何使用的。最终我找到了两个关键的文件:/node_modules/antd/lib/style/core/iconfont.less,/node_modules/antd/lib/style/mixins/iconfont.less,当看到第一个文件和咱们下载下来的iconfont.css文件如此相似,真是放心了一大半。
最后在另一个能覆盖掉自带样式的文件中添加如下代码

这样可以告诉系统先用anticon_user(还记得这个是新建项目时定义的字体名称吧)字体,没有的话再用anticon(ant design定义的)字体

注意:ant design的图标都是\e600多,如下图,因此你自己的图标的Unicode(16进制)定义的时候一定不要和原始的重复,否则会产生不必要的麻烦。

iconfont的使用的更多相关文章

  1. iconfont使用,亲测

    iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...

  2. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  3. 安卓图标IconFont使用

    一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图 ...

  4. iconfont的蜕化操作

    很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...

  5. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  6. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  7. 如何使用iconfont字体代替小图片?

    我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. ...

  8. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

  9. icon-font与svg

    icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...

  10. fontcreator制作iconfont(包含两个教程)

    第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI ...

随机推荐

  1. 拉格朗日乘子法(Lagrange multiplier)和KKT条件

    拉格朗日乘子法: KKT条件:

  2. ChemDraw绘制DNA结构的技巧

    对生物有一定了解的朋友都知道DNA是染色体的重要组成部分,DNA结构中包含重要的遗传物质,孩子的DNA来自父母DNA的组合,这就是为什么“一家人相像”的奥秘所在.ChemDraw虽然号称是化学结构绘制 ...

  3. 【转】JavaScript和Java的区别

    虽然JavaScript与Java有紧密的联系,但却是两个公司开发的不同的两个产品.      Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet 应用程序开发:而Ja ...

  4. server r2 系统更新文件清理

    https://support.microsoft.com/zh-cn/kb/2852386

  5. Bellman-Ford算法(有向图)

    #include <iostream> #include <cstring> #include <cstdio> #define MAX 100 #define I ...

  6. GIT 回退出错 Unlink of file 'xx' failed. Should I try again? (y/n) 解决办法

    发生过程 回退版本 如果回退版本时 里面有删除或者移动的文件 容易出这个问题 解决方法 git reset --hard 版本号  回退失败了  就 本地工作目录跟版本那个工作目录比较   然后还原修 ...

  7. 67、Fragment实现Tab

    <LinearLayout .......... <FrameLayout android:id="@+id/id_content" android:layout_wi ...

  8. 基础知识《十四》Java异常的栈轨迹fillInStackTrace和printStackTrace的用法

    本文转自wawlian 捕获到异常时,往往需要进行一些处理.比较简单直接的方式就是打印异常栈轨迹Stack Trace.说起栈轨迹,可能很多人和我一样,第一反应就是printStackTrace()方 ...

  9. <pre>标签让<textarea>标签的内容原样输出

    当通过<textarea>插数据进数据的库,取出来后都变成一行变成,用这个<pre>标签能原样输入插入时的格式. 当时要对<pre>加一些CSS样式才行啦. 以下为 ...

  10. json/pickle/shelve/xml/configparser/hashlib/subprocess - 总结

    序列化:序列化指把内存里的数据类型转成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes为什么要序列化:可以直接把内存数据(eg:10个列表,3个嵌套字典)存到硬盘 ...