使用Iconfont矢量图标库的详解

丘￥勇

于 2024-08-21 15:16:29 发布

阅读量973

点赞数 28

文章标签： css 前端

本文链接：https://blog.csdn.net/baidu_28705493/article/details/141393314

版权

1. Iconfont基础操作

访问Iconfont官网：首先，打开Iconfont官网，在首页的搜索框中输入需要使用的图标名称。
添加图标到项目：搜索结果出来后，可以选择将图标添加入库，也可以收藏或下载。点击右上角的购物车图标，会显示已添加入库的图标。将想要使用的图标添加至项目。若还未创建项目，则需要新建一个项目并将图标添加至该项目中。
进入项目管理：图标添加至项目后，会自动跳转至该项目页面，也可以通过导航栏中的资源管理进入“我的项目”页面管理已添加的图标。
修改图标名称：点击编辑按钮, 可以修改图标代码, 名称和Class名称

2. 使用Iconfont的两种方法

Iconfont提供了三种图标使用方式：Unicode、Font class、Symbol。本文将重点介绍前两种使用方法。

（1）Unicode使用方法

生成代码：在项目页面选择Unicode使用方式，然后点击“暂无代码，点击生成”按钮，生成一段Unicode代码。将这段代码复制并粘贴到想要引用的页面的CSS文件中。

定义Iconfont样式：在CSS文件中添加以下代码，以定义Iconfont的基础样式：

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

为了防止网络问题导致图标加载失败，建议将相关文件下载到本地项目中,以下是完整实例。

@font-face {
  font-family: 'iconfont';  /* Project id 4652762 */
  src: url('font_4652762_fpb6m6m66wr.woff2?t=1723599160424') format('woff2'),
  url('font_4652762_fpb6m6m66wr.woff?t=1723599160424') format('woff'),
  url('font_4652762_fpb6m6m66wr.ttf?t=1723599160424') format('truetype');
}

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

返回Iconfont官网，复制需要的图标代码，并将其引入到HTML页面中，添加相应的class属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <!-- 引入icon.css样式文件, css文件内容为上一段代码-->
    <link rel="stylesheet" href="icon.css">
</head>
<body>
    <!-- 使用iconfont图标 -->
    <i class="iconfont">&#xe600;</i>
</body>
</html>

（2）Font class使用方法

获取CSS代码：在项目页面选择Font class使用方式。与Unicode不同，Font class方法提供了一个图标的使用链接，点击该链接会显示一段CSS代码。将这段CSS代码全部复制下来，放入项目的CSS文件中。

在HTML中使用图标：将复制的CSS代码保存后，在HTML页面中通过以下方式引入相应图标：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont 示例</title>
    <!-- 引入Iconfont样式 -->
    <link rel="stylesheet" href="icon.css">
</head>
<body>

    <h1>Iconfont 图标示例</h1>

    <div class="icon-container">
        <i class="iconfont icon-home"></i> 首页
    </div>

</body>
</html>

其中，icon-home是图标在CSS文件中的类名。

图标的具体类名可以在Iconfont官网或复制的CSS代码中找到。