html引入icon图标
http://www.iconfont.cn/
我们引入icon都喜欢阿里的矢量图标库
阿里的图标库也是可以下载为图片的
![](https://upload-images.jianshu.io/upload_images/14714949-6777a7a1ad717f57.png?imageMogr2/auto-orient/strip|imageView2/2/w/796/format/webp)
当然下载图片不是我们想要的,我们想要的是字体
第一种方法,本地使用
![](https://upload-images.jianshu.io/upload_images/14714949-f083eb10f672f6b0.png?imageMogr2/auto-orient/strip|imageView2/2/w/168/format/webp)
首先我们选择自己想要的icon 添加入库
![](https://upload-images.jianshu.io/upload_images/14714949-538cdb126d58da32.png?imageMogr2/auto-orient/strip|imageView2/2/w/305/format/webp)
点击下载代码,会自动下载一个压缩文件,解压之后将文件里的所有内容转移到自己项目的css文件夹下
![](https://upload-images.jianshu.io/upload_images/14714949-e8225b4f281f11df.png?imageMogr2/auto-orient/strip|imageView2/2/w/370/format/webp)
主要是文件中的iconfont.css文件,我们看看里面的内容
![](https://upload-images.jianshu.io/upload_images/14714949-17f054f34d73a9ac.png?imageMogr2/auto-orient/strip|imageView2/2/w/865/format/webp)
给大家分析一下
@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添加入库,如何此时点添加至项目
![](https://upload-images.jianshu.io/upload_images/14714949-44ec3f41636e69f5.png?imageMogr2/auto-orient/strip|imageView2/2/w/285/format/webp)
然后操作,添加至哪个项目
![](https://upload-images.jianshu.io/upload_images/14714949-7b71df3a9af6bf40.png?imageMogr2/auto-orient/strip|imageView2/2/w/346/format/webp)
接下来就会在项目中显示我们添加的图标
![](https://upload-images.jianshu.io/upload_images/14714949-cce6706a6f05530e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1189/format/webp)
此时我们点击Font class,再点击查看在线链接
![](https://upload-images.jianshu.io/upload_images/14714949-137bed0557666f60.png?imageMogr2/auto-orient/strip|imageView2/2/w/880/format/webp)
注意这里生成了一段代码,我们复制下来引入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