手把手教你使用字体图标
2018-02-25 本文已影响0人
一颗奋发向上的蛋
常用字体图标库
- 阿里字体图标库 iconfont
- fontawesome 字体图标库
首先使用阿里的字体图标库上个例子
-
选择自己喜欢的图标加入购物车，然后添加至项目，点击生成代码
-
接下来我们引用生成的css，添加相应的class到html里面。我们需要的图标就展示在页面上了
当然这个图标就像文字一样可以设置大小和颜色！
首先为什么要这样做而不直接使用图片呢？
因为这样把图标变成文字了呀，文字是矢量的，放大缩小都不会变模糊！！！
那这么腻害是怎么实现的呢？
-
每个图标都有一个Unicode码。
-
浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到unicode码时候，去查找该unicode的font-family，然后绘制到页面上。
但是显然图标的unicode普通的字体库是不认识的。
-
于是需要自定义font-family
使用字体图标定义的字体库：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.iconfont {
font: 80px 'iconfont';
color: red;
}
@font-face {
font-family: 'iconfont'; /* project id 573379 */
src: url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.eot');
src: url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.woff') format('woff'),
url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.svg#iconfont') format('svg');
}
</style>
</head>
<body>
<span class="iconfont"></span>
</body>
</html>
显示结果：
