http://www.iconfont.cn/
我們引入icon都喜歡阿里的矢量圖標庫
阿里的圖標庫也是可以下載為圖片的
當然下載圖片不是我們想要的，我們想要的是字體
第一種方法，本地使用
首先我們選擇自己想要的icon 添加入庫
點擊下載代碼，會自動下載一個壓縮文件，解壓之后將文件里的所有內容轉移到自己項目的css文件夾下
主要是文件中的iconfont.css文件，我們看看里面的內容
給大家分析一下
@font-face {font-family: "iconfont"; 這一段主要是自定義字體，我們引入的icon其實就是字體，可以使用css中font編輯icon
src: url('iconfont.eot?t=1542158150438'); /* IE9*/
src: url('iconfont.eot?t=1542158150438#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAASQAAsAAAAABwgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZB101TY21hcAAAAYAAAABLAAABcOyJxc1nbHlmAAABzAAAAN8AAAEQkMyYx2hlYWQAAAKsAAAALwAAADYTQnSJaGhlYQAAAtwAAAAcAAAAJAfeA4NobXR4AAAC+AAAAAgAAAAICAAAAGxvY2EAAAMAAAAABgAAAAYAiAAAbWF4cAAAAwgAAAAgAAAAIAERAGRuYW1lAAADKAAAAUUAAAJtPlT+fXBvc3QAAARwAAAAIAAAADHo4st4eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBxeJ75OZG7438AQw9zA0AAUZgTJAQDtHwyveJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf534/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQAieQsBAHicNYtBasJAGIX/N2qyiAxMEpNFy1DCqKAkC81M6SaUzipddFvQjTfpKbr3CN5AD9Ab1K2nKKZOSIQH7/G+92hE9H8anAavlFJOL/RBn0QQ5SzzJoIjTlIRJyujRYVyBucdSTl8ibTCcwE/K1BWWEvEHgrMO+T3v3kF33GzSmKPPYWP4ULrRWfNN1zAUgO1MTWg34UUTg9Kscu9W/ajL9capfCHKQ9D3vwGdmOD5syjiEMFdvvW/DDGdi287odjm7f32uT2IGQmBdybHe/deHjdt0u2c8uoZU5ENxerLJsAeJxjYGRgYADiZxzPK+P5bb4ycLMwgMANwRluCPr/ARYGZgcgl4OBCSQKACEZCZ0AeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAACIAAAAAQAAAAIAWAAFAAAAAAACAAAACgAKAAAA/wAAAAAAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgb0kMzG/OCOTgQEAFJoDDg==') format('woff'),
url('iconfont.ttf?t=1542158150438') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1542158150438#iconfont') format('svg'); /* iOS 4.1- */
}
前面的內容可以不用管，主要是自定義字體與兼容調試，主要是下面的
.iconfont { =>這是同用的字體樣式，我們一般使用字體時 給與它一個iconfont屬性，給予它一個默認樣式
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
這里就是顯示iocn的class名 這里也就是icon-tiaoshi 因為我們只下載了一個圖標，所以這里只有一個
.icon-tiaoshi:before { content: "\eb61"; }
我們來看看如何在html中引用
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./../css/iconfont.css"> 首先引入css </head> <body> <i class="iconfont icon-tiaoshi" style="color:red"></i> 給予class iconfont的默認樣式 以及icon-tiaoshi 我們下載的圖 標標識 注意，這個是字體不是圖片 </body> <script> </script> </html>
本地下載圖片的步驟就是這樣，可以一次性下載多個，根據實際項目找到適合自己的圖標
接下來我們看看cdn如何引入，我們先清除html中的css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> <script> </script> </html>
與之前一樣，我找了幾個iocn添加入庫，如何此時點添加至項目
然后操作，添加至哪個項目
接下來就會在項目中顯示我們添加的圖標
此時我們點擊Font class，再點擊查看在線鏈接
注意這里生成了一段代碼，我們復制下來引入css
注意代碼之前要加http: 冒號不能丟
注意看下方的圖標，自帶類名 icon-icon_zhang... 我們直接復制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="http://at.alicdn.com/t/font_908809_yescakidb6b.css"> </head> <body> </body> <script> </script> </html>
使用圖標我們引入圖標名即可
<i class="iconfont icon-icon_zhanghao"></i> 此時你發現瀏覽器已經解析字體圖標了，iconfont類名必須添加
原作連接 https://www.jianshu.com/p/8f14411824b2