手把手教你使用字体图标

常用字体图标库

  1. 阿里字体图标库 iconfont
  2. fontawesome 字体图标库

首先使用阿里的字体图标库上个例子


  1. 选择自己喜欢的图标加入购物车,然后添加至项目,点击生成代码


  2. 接下来我们引用生成的css,添加相应的class到html里面。我们需要的图标就展示在页面上了



当然这个图标就像文字一样可以设置大小和颜色!

首先为什么要这样做而不直接使用图片呢?
因为这样把图标变成文字了呀,文字是矢量的,放大缩小都不会变模糊!!!

那这么腻害是怎么实现的呢?

  1. 每个图标都有一个Unicode码。


  2. 浏览器打开页面时,浏览器会读取 HTML 文件进行解析渲染。当读到unicode码时候,去查找该unicode的font-family,然后绘制到页面上。
    但是显然图标的unicode普通的字体库是不认识的。


  3. 于是需要自定义font-family



    使用字体图标定义的字体库:




  
  JS Bin
  


  


显示结果:


你可能感兴趣的:(手把手教你使用字体图标)