Iconfont阿里矢量图库结合css3属性font-face的使用

在前端的网页制作中，经常要使用到小图标来美化自己的网页，或者使用自定义的字体来美化，现在来看看如何用css3的属性font-face来结合阿里的矢量库，首先进入阿里的矢量图库，将自己选好的图标加入到购物车内，比如下载csdn的图标：

接着点击下载代码，则会获得一个文件夹，主要用到的文件如下：

其中的除了.css文件外，都是自定义的字体文件，里面包含着你所下载的图标，打开.css文件会发下有如下css代码：

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1541600405827'); /* IE9*/src: url('iconfont.eot?t=1541600405827#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABoAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7g0b/Y21hcAAAAYAAAABLAAABcOY1stFnbHlmAAABzAAAAIwAAACM6BEYk2hlYWQAAAJYAAAALwAAADYTMW8naGhlYQAAAogAAAAcAAAAJAfeA4NobXR4AAACpAAAAAgAAAAICAAAAGxvY2EAAAKsAAAABgAAAAYARgAAbWF4cAAAArQAAAAeAAAAIAEOADJuYW1lAAAC1AAAAUUAAAJtPlT+fXBvc3QAAAQcAAAAHQAAAC5khGV0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8j7lZW7438AQw9zA0AAUZgTJAQDfAwv7eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8r7/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBGPgmZAAACAAD/gAQAA4AACwAlAAABFgAXBgAHJgAnNgABNw4BIyImNz4BFzIWFzcuASMOAQcGFhcyNgIA2gEhBQX+39ra/t8FBQEhAZgLGlUlZWUHC4JcKlYXDiBOOp7nEgqyrzxVA4AF/t/a2v7fBQUBIdraASH9FWwHCUhKUkEBCwdxCAkBh39tigIJAAAAeJxjYGRgYADiKIuvV+L5bb4ycLMwgMANTtGpCPp/AwsDcwOQy8HABBIFABUkCTIAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAABGAAB4nGNgZGBgYGJQA2IGMIuBgQsIGRj+g/kMAAxkAUEAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSW5OCWPgQEACeIBwgAAAA==') format('woff'),url('iconfont.ttf?t=1541600405827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1541600405827#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-csdn:before { content: "\e50d"; }

从代码中可以看到，不同的自定义的字体文件对应着不同的浏览器内核，而在最后一行，用css代码命名标出是csdn图标的，所以不用担心找不到对应的图标了。将上述文件拷进自己的项目，需注意的是，不知道怎么回事，.css里选择器用原来的名字会不显示效果，这里需要把.css里的选择器改名：

@font-face {font-family: "csdn1";src: url('iconfont.eot?t=1541600405827'); /* IE9*/src: url('iconfont.eot?t=1541600405827#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABoAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7g0b/Y21hcAAAAYAAAABLAAABcOY1stFnbHlmAAABzAAAAIwAAACM6BEYk2hlYWQAAAJYAAAALwAAADYTMW8naGhlYQAAAogAAAAcAAAAJAfeA4NobXR4AAACpAAAAAgAAAAICAAAAGxvY2EAAAKsAAAABgAAAAYARgAAbWF4cAAAArQAAAAeAAAAIAEOADJuYW1lAAAC1AAAAUUAAAJtPlT+fXBvc3QAAAQcAAAAHQAAAC5khGV0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8j7lZW7438AQw9zA0AAUZgTJAQDfAwv7eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8r7/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBGPgmZAAACAAD/gAQAA4AACwAlAAABFgAXBgAHJgAnNgABNw4BIyImNz4BFzIWFzcuASMOAQcGFhcyNgIA2gEhBQX+39ra/t8FBQEhAZgLGlUlZWUHC4JcKlYXDiBOOp7nEgqyrzxVA4AF/t/a2v7fBQUBIdraASH9FWwHCUhKUkEBCwdxCAkBh39tigIJAAAAeJxjYGRgYADiKIuvV+L5bb4ycLMwgMANTtGpCPp/AwsDcwOQy8HABBIFABUkCTIAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAABGAAB4nGNgZGBgYGJQA2IGMIuBgQsIGRj+g/kMAAxkAUEAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSW5OCWPgQEACeIBwgAAAA==') format('woff'),url('iconfont.ttf?t=1541600405827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1541600405827#iconfont') format('svg'); /* iOS 4.1- */
}.csdn {font-family:"csdn1" !important;font-size:16px;font-style:normal;color: brown;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-csdn:before { content: "\e50d"; }

在html里引用：

<p class="csdn icon-csdn">Hello world!</p>

效果为：

Iconfont阿里矢量图库结合css3属性font-face的使用相关推荐

iconfont阿里图标使用方法（Font Class用法）
1.先去iconfont官网下载图标选图标加入购物车 2.从购物车里下载代码(或者png.svg看需求) 3.下载解压后会有一个这样的文件夹把这三个文件重新创建一个文件夹放到项目的文件夹里(主 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
微信小程序使用iconfont阿里矢量多色图标
引用使用方法: 引用方法名支持多色兼容性 unicode ❌ 好 font-class ❌ 良好 symbol ✔ 差虽然unicode和font-class很好,但你会发现都不支持多色模式, ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
css3学习之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看下面我将结合<HTML 5与css 3权威指南>这本书对css选择器再进行记录下里面有些个人见解如果看客觉得有问题.可以提出 ...
html+not选择器,CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose
一:css3属性选择器: img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代 ...
CSS基础(part19)--CSS3属性选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案 CSS3属性选择器属性选择器列表: 选择符简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择 ...
css3属性选择器总结
css3属性选择器总结 (1)E[attr]只使用属性名,但没有确定任何属性值 <p miaov="a1">111111</p> <p miaov=& ...
CSS3属性box-shadow使用教程
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性: Opera: 不知道是 ...
JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

Iconfont阿里矢量图库结合css3属性font-face的使用

Iconfont阿里矢量图库结合css3属性font-face的使用相关推荐

最新文章

热门文章