前言
項目開發中，是避免不了使用小圖標的，那么國內比較好用的圖標網站當屬iconfont了，下面我們將詳細介紹如何使用。
iconfont選擇所需圖標
2、把所需要的添加進入購物車
3、添加所需圖標完畢后，點擊右上角的購物車圖標
4、下載代碼
5、下載的代碼解壓后
圖片上圈起來的都是字體文件
6、項目中新建一個font文件夾用來放置字體文件
7、取出iconfont.css文件放入css文件夾
8、打開iconfont.css文件，配置正確的字體文件路徑
// 這里要根據自己的項目配置正確的字體路徑：../font/iconfont.eot
@font-face {font-family: "iconfont";
src: url('../font/iconfont.eot?t=1554343058030'); /* IE9 */
src: url('../font/iconfont.eot?t=1554343058030#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('這里省略的base64字符...') format('woff2'),
url('../font/iconfont.woff?t=1554343058030') format('woff'),
url('../font/iconfont.ttf?t=1554343058030') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../font/iconfont.svg?t=1554343058030#iconfont') format('svg'); /* iOS 4.1- */
}
// 這個文件是下載字體時系統自帶的
.iconfont {
font-family: "iconfont" !important; // 這里的iconfont 和上面定義的font-family一定要是一樣的
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// 下面是自動生成的圖標類，可以直接引用
.icon-icon_add:before {
content: "\eb8f";
}
.icon-icon_addmessage:before {
content: "\eb90";
}
.icon-icon_addresslist:before {
content: "\eb91";
}
.icon-icon_affiliations_li:before {
content: "\eb92";
}
9、項目中使用
<!-- 這個文件一定要正確引入 -->
<link rel="stylesheet" href="../../css/iconfont.css">
/* 正確使用一個icon */
<i class="iconfont icon-icon_add"></i>
這樣我們就可以愉快的使用icon了
效果展示：
【font-class】
我們引用icon的方式是通過class的方式引入的。具有以下特點：
- 兼容性良好，支持 IE8+，及所有現代瀏覽器。
- 相比於 Unicode 語意明確，書寫更直觀。可以很容易分辨這個 icon 是什么。
- 因為使用 class 來定義圖標，所以當要替換圖標時，只需要修改 class 里面的 Unicode 引用。
- 不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
[注意] 之所以兼容IE8+是因為使用了before偽元素
【Symbol 引用】
這是一種全新的使用方式，應該說這才是未來的主流，也是平台目前推薦的用法。
這種用法其實是做了一個 SVG 的集合，與class引入相比具有如下特點：
- 支持多色圖標了，不再受單色限制。
- 通過一些技巧，支持像字體那樣，通過 font-size, color 來調整樣式。
- 兼容性較差，支持 IE9+，及現代瀏覽器。
- 瀏覽器渲染 SVG 的性能一般，還不如 png。
【使用方式】
引入下載下來的iconfont.js到相應文件夾
HTML文件中引入iconfont.js
<script src="../../js/iconfont.js"></script>
HTML中使用svg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font</title>
<link rel="stylesheet" href="../../css/iconfont.css">
<style>
/* 添加svg樣式 */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 引入svg -->
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-icon_addresslist"></use>
</svg>
<script src="../../js/iconfont.js"></script>
</body>
</html>
現在頁面上也可以正確渲染圖標了。
小結
目前來說，常用的方法就是上面兩種了，我們團隊目前使用的是class方式引用。