1. 第一步。准备svg格式图片

2. 登陆http://iconfont.cn/网站,上传图标.

3. 选中需要制作成iconfont的图标。

4. 将选中的图标转储为项目

5. 下载至本地。

6. 使用:

a. 引入下面四个文件

  

b. 添加css到css文件内

 @font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
} .iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
  /* content的内容为生成的iconfont文字编码, */
.icon-meiriyiti:before { content: "\e600"; }
.icon-xiaobaobiao:before { content: "\e601"; }
.icon-dabaobiao:before { content: "\e602"; }

c: html内引用有两种方式。

c1:  <i class="icon iconfont"></i>

     c2:  <i class="icon icon-meiriyiti"></i>

IconFont字体制作的更多相关文章

  1. (转载)app ico图标字体制作

    图标字体化浅谈   在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复 ...

  2. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  3. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

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

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

  5. Laya 位图字体制作(失败...)

    参考: 官网教程-位图字体的制作与使用 一.下载字体并安装字体 从站长字体下载了液晶数字字体,将TTF文件拖入C盘windows/Font文件夹,则字体会自动安装 二.下载字体制作工具 Bitmap ...

  6. BMFONT 字体制作

    原地址:http://blog.csdn.net/luyuncsd123/article/details/18351057 网上搜BMFont做字体,很多都是从一个字体文件读取,然后选择需要的字,然后 ...

  7. 00字体图标iconfont的制作与使用--阿里矢量图库

    一.iconfont的使用范围 在工作当中,经常会用到嵌在元素里的小图标 在这种情况下,如果使用<img>标签或者用作背景图片,也能实现这种效果.但是如果这么做的话,就必须把图片一个个切下 ...

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

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

  9. 页面添加iconfont字体-[超详细]-支持彩色

    第一步: 去矢量图官网注册一下,获取小图标(字体) 的来源 (也可以是其他类似的网站)这里以 阿里妈妈矢量图 官网为例,因为图标丰富,方便使用. 注册请点:https://www.iconfont.c ...

随机推荐

  1. Intent 四个重要属性

    Intent作为联系各Activity之间的纽带,其作用并不仅仅只限于简单的数据传递.通过其自带的属性,其实可以方便的完成很多较为复杂的操作.例如直接调用拨号功能.直接自动调用合适的程序打开不同类型的 ...

  2. Java数据结构和算法之链表

    三.链表 链结点 在链表中,每个数据项都被包含在‘点“中,一个点是某个类的对象,这个类可认叫做LINK.因为一个链表中有许多类似的链结点,所以有必要用一个不同于链表的类来表达链结点.每个LINK对象中 ...

  3. css模糊效果

    CSS代码: .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); ...

  4. 机械键盘那些事[我用过的minila Filco cherry 3494 阿米洛87]

    用过几月下来.最终现在还能流畅使用的,就剩下3494 跟 minila了. 想起购买的初衷.cherry是泰斗,红轴轻柔,所以三把全红轴. 之后,觉得携带外出不方便,所以就又入了个MINILA. 再后 ...

  5. 根据 url请求数据

    public static JSONObject getJsonFromUrl(String url){ CloseableHttpClient httpClient = HttpClients.cr ...

  6. Oracle学习系列1-7

    Oracle学习系列1 两个服务必须启动: OracleOraDb10g*TNListener 和 OracleService*** 使用sqlplusw先进行环境的设置 set linesize 3 ...

  7. 《统计推断(Statistical Inference)》读书笔记——第6章 数据简化原理

    在外行眼里统计学家经常做的一件事就是把一大堆杂七杂八的数据放在一起,算出几个莫名其妙的数字,然后再通过这些数字推理出貌似很靠谱的结论,简直就像是炼金术士用“贤者之石”把一堆石头炼成了金矿.第六章,应该 ...

  8. How do you build a database?

    在reddit上看到的一篇讲解数据库实现的文章,非常有意思,在这里记录一下. 回答者technical_guy: Its a great question, and deserves a long a ...

  9. 抓包工具PowerSniff-0.1

    做这个程序的意图是wireshark插件编写复杂(虽然也支持lua),而轻量级的工具如smartsniff,minisniff不支持插件化数据分析,各种工具用下来或多或少不顺手.以前写的外挂也都是手工 ...

  10. IEnumerable 和 IQueryable 区别

    IQueryable继承自IEnumerable,所以对于数据遍历来说,它们没有区别. 但是IQueryable的优势是它有表达式树,所有对于IQueryable的过滤,排序等操作,都会先缓存到表达式 ...