,
Iconfont 介绍及图片形式使用图标
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。
使用方式一 下载透明图标
搜到指定的图标点击下载按钮将图标下载到本地并部署到您的项目。img代码
<img src=”图片路径” />
使用方式二 选择好自己需要的图标加入到购物车并使用css形式的图标
选择好自己需要的图标加入到购物车然后点击购物车按钮选择下载代码。
下载后的目录结构
|_ iconfont.css //核心css
//4个字体文件对应了不同的浏览器
|_ iconfont.eot
|_ iconfont.svg
|_ iconfont.ttf
|_ iconfont.woff
unicode引用
unicode是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式
unicode使用步骤如下：
第一步：拷贝项目下面生成的font-face
@font-face { font-family: ‘iconfont’; src: url(‘iconfont.eot’); src: url(‘iconfont.eot?#iefix’) format(‘ ded-opentype’) url(‘iconfont.woff’) format(‘woff’) url(‘iconfont.ttf’) format(‘truetype’) url(‘iconfont.svg#iconfont’) format(‘svg’); }
第二步：定义使用iconfont的样式
.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; }
第三步：挑选相应图标并获取字体编码，应用于页面
3 “iconfont”是你项目下的font-family。可以通过编辑项目查看，默认是”iconfont”。
font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：引入项目下面生成的fontclass代码：
< rel=”stylesheet” type=”text/css” href=”./iconfont.css”>
第二步：挑选相应图标并获取类名，应用于页面：
使用方式三 建立项目便于更新
您可以在iconfont上登录，然后创建项目并保存，这样的好处是添加新的图标可以很方便的更新到已有项目内。
| 下载地址 | |
|---|---|
| 在线使用 iconfont |
评论0