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

Iconfont阿里矢量图库结合css3属性font-face的使用在前端的网页制作中,经常要使用到小图标来美化自己的网页,或者使用自定义的字体来美化,现在来看看如何用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的使用分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10049.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注