Iconfont 在HTML中的使用
一、准备阶段:
a.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标,加入购物车
b.点击网页中的购物车下载代码
二、3种方法实现 iconfont 的html显示
-
unicode 引用
unicode 是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持 ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版 iconfont 支持多色图标,这些多色图标在 unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
第一步:在css代码块或css文件中使用 @font-face 声明字体@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), 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; -moz-osx-font-smoothing: grayscale; }
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont"></span>
完整代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <span class="iconfont"></span> </body> </html>
注意:css代码块中的 @font-face 内的 src: url('iconfont.eot'); 中的 url 即为之前准备阶段下载的源码文件夹下的对应文件,此处的完整代码的文件路径与 iconfont.eot 在同一目录下,若相应文件不在同一目录下请修改url参数。
实现效果: -
2.font-class 引用
font-class 是 unicode 使用方式的一种变种,主要是解决 unicode 书写不直观,语意不明确的问题。
与 unicode 使用方式相比,具有如下特点:
- 兼容性良好,支持 ie8+,及所有现代浏览器。
- 相比于 unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 unicode 引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:第一步:引入项目下面生成的 fontclass 代码(即为准备阶段下载的代码文件中的iconfont.css文件)重要!!!:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-setup"></span>
3.symbol 引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 svg 的集合,与另外两种相比具有如下特点:
-
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染 svg 的性能一般,还不如 png。
使用步骤如下:
-
- 第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
- 第一步:引入项目下面生成的 symbol 代码:
-
- 第二步:加入通用 css 代码(引入一次就行):
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentcolor; overflow: hidden; } </style>
- 第二步:加入通用 css 代码(引入一次就行):
-
-
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-setup"></use> </svg>
-
三、效果展示
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/iconfont-style.css" /> </head> <body> <a class="btn btn-lg btn-primary"><i class="icon icon-info"></i> more about</a> </body> </html>
iconfont-style.css
@font-face { font-family: 'iconfont'; src:url('../fonts/iconfont.eot?-8vg322'); src:url('../fonts/iconfont.eot?#iefix-8vg322') format('embedded-opentype'), url('../fonts/iconfont.woff?-8vg322') format('woff'), url('../fonts/iconfont.ttf?-8vg322') format('truetype'), url('../fonts/iconfont.svg?-8vg322#iconfont') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* better font rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-user-female:before { content: "\e106"; } .icon-user-follow:before { content: "\e064"; } .icon-user-following:before { content: "\e065"; } 更多定义的icon此处省略........
引用的 fonts 目录下的文件:
效果图:
更多精彩的效果图展示:
上一篇: 浅析网站优化人员能让网站在百度首页出现的四个基本知识
下一篇: C语言编程笔记丨循环链表实现约瑟夫杯