css引入矢量图标_html引入icon图标

我们引入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中引用

Document

首先引入css

给予class iconfont的默认样式 以及icon-tiaoshi 我们下载的图

标标识

注意，这个是字体不是图片