
一、准备阶段:
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:; /* 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 目录下的文件:
效果图:
更多精彩的效果图展示: