阿里妈妈字体图标Iconfont的使用方法

黄马小配件

已于 2022-11-29 00:24:48 修改

阅读量2.3k

点赞数 1

文章标签： css html 前端

于 2022-11-27 00:00:52 首次发布

本文链接：https://blog.csdn.net/m0_59812088/article/details/128059077

版权

使用字体图标的目的：使用字体图标技巧实现网页中简洁的图标效果

字体图标
Ø 字体图标展示的是图标，本质是字体。
Ø 处理简单的、颜色单一的图片

Iconfont官网地址：Iconfont官网地址

下载字体包：

登录（新浪微博） → 选择图标库→ 选择图标，加入购物车→ 购物车→ 添加至项目→ 下载至本地

按上述步骤添加至购物车后，下载至本地

同时我们也可以查看到字体图标的Unicode编码和类名，使用字体图标的时候需要使用到Unicode编码或类名

使用字体图标有两种方式，通过Unicode编码方式、或者类名，下面将分别阐述：

通过Unicode编码方式使用字体图标步骤

1、引入样式表：iconfont.css；
2、复制粘贴图标对应的Unicode编码；
3、设置文字字体。

<!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>
    <!-- 1.引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>

      i {
        /* 3、设置文字字体为iconfont */
        font-family: iconfont;  
        font-style: normal;
        font-size: 50px;
        color: yellow;
      }
    </style>
  </head>

  <body>
    <!-- 2.通过i标签把unicode编码复制过来 -->
    <i>&#xe600;</i>
  </body>
</html>

通过类名使用字体图标步骤

1、引入字体图标样式表;

2、调用图标对应的类名，必须调用2个类名
（2.1） iconfont类：基本样式，包含字体的使用等
(2.2) icon-xxx：图标对应的类名

<!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>Document</title>
    <!-- 1引入iconfont.css文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      .icon1 {
        font-size: 100px;
        color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <!-- 
      2.通过i标签承接字体图标
        类名：
          第一个类名是固定的：iconfont;
          第二个类名：通过html文件，直接去复制文字下方的类名即可
     -->
    <i class="iconfont icon-hanbao icon1"></i>
  </body>
</html>

如果图标库没有项目所需的图标怎么办？

1. 与设计师沟通，得到SVG矢量图；
2. IconFont网站上传图标，下载使用。

上传矢量图方法：
1、上传→ 上传SVG图标；

2、浏览本地图标→ 去除颜色提交；

3、加入购物车→ 下载使用。

黄马小配件

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
阿里妈妈字体图标Iconfont的使用方法

（2.1） iconfont类：基本样式，包含字体的使用等。(2.2) icon-xxx：图标对应的类名。2. IconFont网站上传图标，下载使用。通过Unicode编码方式使用字体图标步骤。1、引入样式表：iconfont.css；2、复制粘贴图标对应的Unicode编码；2、调用图标对应的类名，必须调用2个类名。2、浏览本地图标→ 去除颜色提交；同时我们也可以查看到字体图标的。使用字体图标有两种方式，通过。1、上传→ 上传SVG图标；1、引入字体图标样式表;通过类名使用字体图标步骤。
复制链接

扫一扫