字体图标的作用和使用方式

风哑

已于 2022-07-17 00:55:23 修改

阅读量1.9k

点赞数 3

分类专栏：前端_移动web 文章标签：前端 html css

于 2022-03-10 09:08:49 首次发布

本文链接：https://blog.csdn.net/A_Common_Man/article/details/123392042

版权

前端_移动web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：今天学了字体图标，觉得比起精灵图要方便，为了避免以后忘记，故在此记录

作用：1.使用和修改方便，不需要量尺寸，比精灵图要好用

2.减少向服务器发送请求的次数

本质：本质是文字，可以设置大小，颜色和位置。

使用方法：

1.本地引用

1.先在www.iconfont.cn中添加想要的图标到购物车

2.打开购物车，选择下载到项目（没有项目可以新建），然后在资源管理里面找到我的项目，选择下载到本地

3.将下载好的压缩包解压，然后选择所有文件放到项目文件夹里的fonts里面（没有就在项目文件夹里新建fonts文件夹）

4.通过link标签引入fonts里的iconfont.css

5.在目标标签里给个类名叫iconfont(类名可以在iconfont.css里面修改，但是最好不要改），然后在fonts里的demo_index.html找到想要的图标,按照说明复制图标的专属类名，放到标签的类名里面形成多重类名

6.通过.iconfont或者.字体图标类名来修改字体图标的样式

注意：给伪元素（只有双标签能加伪元素，单标签不能加伪元素）使用时，注意添加font-family：iconfont；同时content:' ' ；里面放入unicode的后四位，前面记得加\ 。比如： content: '\e67d';

代码图：

2.在线引用

1.在www.iconfont.cn的我的项目里面找到font class（如果没有项目需要提前创建），点击生成代码，然后点击一下会跳转一个css文件，复制该文件的域名到目标文件的link标签里面，直接在线引用css

2.找到阿里巴巴矢量图标库中自己的项目，选择font class ，复制想要的图标的代码

3.同本地引用，在指定的标签里面加入该图标类名和iconfont，然后就可以出来了，用类选择器可以修改图标的样式

注意：在线引用css的字体图标的时候，需要有网络才能显示出来

注意2：实际开发中，在线引用的情况比较多，一般公司的ui会给一个图标库的地址，直接引用就行

代码图：

效果图：

复制下列代码打开试试：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线引用字体图标</title>

  <!-- 使用在线字体图标需要联网 -->

  <link rel="stylesheet"
    href="https://at.alicdn.com/t/font_3231507_a5p8hbmeuy.css?spm=a313x.7781069.1998910419.76&file=font_3231507_a5p8hbmeuy.css">
  <style>
    .iconfont {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <span class="iconfont icon-fenxiang"></span>
  <span class="iconfont icon-dianzan2"></span>
  <img width="250px" src="https://c-ssl.dtstatic.com/uploads/item/202005/05/20200505202749_sgsff.thumb.1000_0.jpg"
    alt="图片加载失败:1.你没联网 2.在线图片地址更改 3.你用的open with live server打开">

  <img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png"
    alt=" 图片加载失败:1.你没联网 2.在线图片地址更改 3.你用的open with live server打开">
</body>

</html>

字体图标到此结束，欢迎评论补充~