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. cocos2d 中显示系统时间

    用到的两个方法先贴上 这个是时间回调 每分钟回去调用一次时间设置方法 //定时更新状态栏上的时间 void MGameScene::update(float dt) { ; fpassedTime + ...

  2. web安全之sql注入实例(5.0之前的)

    web安全之sql(5.0之前)注入实例 5.0之前的数据库没有information库. 所以这里需要运用的是load_file()函数来获取信息. 1.判断是否有sql注入,用and 1=1 和 ...

  3. x-code快捷键

    关于xcode  可设偏好设置 command+,清空缓存 可设隐藏xcode command+h隐藏其它 command+option+h显示全部 可设退出xcode command+q 文件相关: ...

  4. (转) Deep Reinforcement Learning: Playing a Racing Game

    Byte Tank Posts Archive Deep Reinforcement Learning: Playing a Racing Game OCT 6TH, 2016 Agent playi ...

  5. 【Unity3D技巧】在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信 (二) : 引入中间层NotificationCenter

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...

  6. jQuery HTML节点元素修改、追加的方法 html()、append()、prepend()、

    我们先拟定一个代码场景 <div>start</div> <p>123</p> <div>end</div> html() 操作 ...

  7. MySQL物理文件组成

    日志文件 错误日志:Error Log 错误日志记录了MySQL运行过程中所有较为严重的警告和错误信息,以及MySQL Server每次启动和关闭的详细信息.在默认情况下,系统记录错误日志的功能是关闭 ...

  8. 【转】编译quickfast解析库(沪深level2行情转码库)

     转自http://blog.csdn.net/hacode/article/details/7065889 编译quickfast解析库(沪深level2行情转码库) 目录(?)[-] 1 下载源代 ...

  9. UISwitch控件的使用

    UISwitch控件的作用是提供一个开关给用户,用户可以选择打开或者关闭. UISwitch的基本属性包括: 1.onTintColor:打开状态下的背景颜色 2.thumbTintColor:滑块的 ...

  10. JS操作iframe

    1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...