前端小白的图标使用

Heriec
175 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

图标使用

如果我们想要去在前端使用一些图标，但是我们不会做啊，总不可能找人画吧，根本不可能，你想到的，这个市场也是想到了。

iconfont-阿里巴巴矢量图标库

进入这个网站，就能有海量的图标，在注册之后可以搜索等等，

在这里介绍两个地方，在菜单下：

  • 我的收藏：存放我们星标的图标
  • 我的项目：归类我们在购物车里面的图标，如果没有归类就一直在购物车中

image-20220816122342731

以我这个项目为例子来介绍一下如何使用

image-20220816122704436

我们看，这里我们有三种形式的图标在前端的使用形式，分别是：

  • Unicode
  • font-class
  • Symbol

每一种我们都可以使用在线的CDN服务，我们先使用一下我们本地下载的使用。

本地使用

下载下来，我们看文件里面的结构

image-20220816123205331

我把这些文件大致分为三类：

  1. 第一类是给我们的demo，里面有html和它的样式
  2. 第二类是我们三种是我们在前端的三种使用形式，其中json是说明文件，其实可有可没有
  3. 第三类就是我们的资源，必须引入

font-class引入

首先，我们在Unicode和font-class使用的时候，直接把iconfont.css的文件放到我们想要的位置，然后在我们的main.js下直接导入

import './assets/css/icon/iconfont.css';

如果是html中就直接

<link rel="stylesheet" href="./iconfont.css">

font-class的时候就挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

例如：

<i class="iconfont icon-dianpu"></i>

这里一定要有iconfont，二则和缺一不可

Unicode引入

对于Unicode一样把css文件如上方式导入，然后使用：

<i class="iconfont">&#xe600;</i>

我们来看下我们的css文件：

@font-face {
  font-family: "iconfont"; /* Project id 3591262 */
  src: url('iconfont.woff2?t=1660622560210') format('woff2'),
       url('iconfont.woff?t=1660622560210') format('woff'),
       url('iconfont.ttf?t=1660622560210') format('truetype');
}
​
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
​
.icon-qiandai:before {
  content: "\e600";
}
​
.icon-xiaoshou:before {
  content: "\e6ac";
}
​
.icon-dianpu:before {
  content: "\e895";
}

这里面如果想要font-class方式引入必须上面一个不少，

如果想要Unicode引入只需要：

@font-face {
  font-family: "iconfont"; /* Project id 3591262 */
  src: url('iconfont.woff2?t=1660622560210') format('woff2'),
       url('iconfont.woff?t=1660622560210') format('woff'),
       url('iconfont.ttf?t=1660622560210') format('truetype');
}
​
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Symbol引入

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
  • 兼容性较差，支持 IE9+，及现代浏览器。
  • 浏览器渲染 SVG 的性能一般，还不如 png。

这是文档里面所述。

首先，引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

或者

import iconfont from '../../src/assets/css/icon/iconfont'

使用

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-dianpu"></use>
</svg>

这里面有个css（引入一次就行）：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

CDN引入

你都知道了本地如何引入了，还不知道CDN如何使用吗？

需要注意的是，我们引入的时候

  • font-class引入时，如果是到css文件就需要@import

    @import "//at.alicdn.com/t/c/font_3591262_yu6ow8k55vi.css";

    这里面我们可以看到是有.iconfont的样式的

  • Unicode引入时，是没有.iconfont样式的，需要有：

    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  • Symbol引入时，就是相当于引入js文件，所以也要有上面的.icon的css

avatar
文章
阅读
粉丝