IconFont字体制作
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字体制作的更多相关文章
- (转载)app ico图标字体制作
图标字体化浅谈 在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复 ...
- iconfont字体图标和各种CSS小图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- css 小图标 & iconfont 字体图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- 如何使用iconfont字体代替小图片?
我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. ...
- Laya 位图字体制作(失败...)
参考: 官网教程-位图字体的制作与使用 一.下载字体并安装字体 从站长字体下载了液晶数字字体,将TTF文件拖入C盘windows/Font文件夹,则字体会自动安装 二.下载字体制作工具 Bitmap ...
- BMFONT 字体制作
原地址:http://blog.csdn.net/luyuncsd123/article/details/18351057 网上搜BMFont做字体,很多都是从一个字体文件读取,然后选择需要的字,然后 ...
- 00字体图标iconfont的制作与使用--阿里矢量图库
一.iconfont的使用范围 在工作当中,经常会用到嵌在元素里的小图标 在这种情况下,如果使用<img>标签或者用作背景图片,也能实现这种效果.但是如果这么做的话,就必须把图片一个个切下 ...
- 如何使用IconFont字体图标代替网页图片?
一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...
- 页面添加iconfont字体-[超详细]-支持彩色
第一步: 去矢量图官网注册一下,获取小图标(字体) 的来源 (也可以是其他类似的网站)这里以 阿里妈妈矢量图 官网为例,因为图标丰富,方便使用. 注册请点:https://www.iconfont.c ...
随机推荐
- Visual Studio 2012+jQuery-1.7.1
今天用Visual Studio 2012开发一个网站项目,在集成jqplot图表控件并进行调试的时候(使用的是MVC4框架),加载网页绘制图表的时候总是报错(提示$.jqplot.barRender ...
- Thrift 个人实战--Thrift 网络服务模型
前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...
- web安全之sql注入实例(5.0之前的)
web安全之sql(5.0之前)注入实例 5.0之前的数据库没有information库. 所以这里需要运用的是load_file()函数来获取信息. 1.判断是否有sql注入,用and 1=1 和 ...
- yii使用MongoDB作为数据库服务软件[win7环境下](1)
1.进入http://php.net,在站内搜索栏搜索mongodb,查看相关的安装步骤信息. 2.找到相应的php.ini配置文件,使用wampserver等服务器软件时,千万不要找错了php.in ...
- [原创]cocos2d-x研习录-第二阶 概念类之场景类(CCScene)
场景类CCScene是Cocos2D-x在屏幕显示的内容,相当于游戏关卡或界面.CCDirector任何时候只能显示一个场景CCScene,游戏中可能存在若干场景,CCDirector通过场景切换达到 ...
- SQL server数据缓存依赖
SQL server数据缓存依赖有两种实现模式,轮询模式,通知模式. 1 轮询模式实现步骤 此模式需要SQL SERVER 7.0/2000/2005版本以上版本都支持 主要包含以下几 ...
- [solr] - Facet - autocomplete
Solr的facet可以用于一般性的前缀式自动完成功能,当然,它的主要功能是用于做统计.分类.区间等. 统计.分类.区间功能,可参考下文: http://hongweiyi.com/2013/03/a ...
- Rabbitmq集群高可用测试
Rabbitmq集群高可用 RabbitMQ是用erlang开发的,集群非常方便,因为erlang天生就是一门分布式语言,但其本身并不支持负载均衡. Rabbit模式大概分为以下三种:单一模式.普通模 ...
- Silverlight管理系统源代码(SilverlightOAFlame开发框架主要提供二次开发)
Silverlight OA系统简介 系统功能简介 l 程序界面介绍: 左侧为主菜单,主菜单可以展开和收起,主菜单下面的所有模块都可以在数据库中扩展增加,模块的权限和用户角色挂钩,可以在数据库中创建多 ...
- Storm Bolt接口
Bolt是Topology中数据处理的基本单元,也是Storm针对处理过程的编程单元.Topology中所有的处理都是在这些bolt中完成的. Bolt可以将数据项发送至多个数据流(Str ...