手把手教你使用字体图标

作者: 一颗奋发向上的蛋 | 来源:发表于2018-02-25 22:46 被阅读0次

大话 Axure | 轻松导出图标字体所有图标
手把手教你使用字体图标
Bootstrap布局组件——字体图标
字体图标
Xcode如何使用字体文件
01-字体图标配置和使用
Bootstrap 布局组件
阿里的字体库—iconfont
2019-04-11 字体图标(Glyphicons)（1）
TDD编程：Word Frequency

常用字体图标库

阿里字体图标库 iconfont
fontawesome 字体图标库

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

选择自己喜欢的图标加入购物车，然后添加至项目，点击生成代码
接下来我们引用生成的css，添加相应的class到html里面。我们需要的图标就展示在页面上了

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

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

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

每个图标都有一个Unicode码。
浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到unicode码时候，去查找该unicode的font-family，然后绘制到页面上。
但是显然图标的unicode普通的字体库是不认识的。
于是需要自定义font-family

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .iconfont {
      font: 80px 'iconfont';
      color: red;
    }
    @font-face {
      font-family: 'iconfont';  /* project id 573379 */
      src: url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.eot');
      src: url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.eot?#iefix')     format('embedded-opentype'),
      url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.woff') format('woff'),
      url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_573379_bv3xp0ygr6g30udi.svg#iconfont') format('svg');
    }
  </style>
</head>
<body>
  <span class="iconfont">&#xe62c;</span>
</body>
</html>

显示结果：