html中如何使用网络字体（iconfont的使用）

最新推荐文章于 2023-10-31 22:13:07 发布

原创最新推荐文章于 2023-10-31 22:13:07 发布 · 848 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何从Iconfont官网获取图标、添加到项目并引用到HTML中。步骤包括添加购物车、创建文件夹、链接样式表和实际使用图标。适合前端开发者快速集成定制图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：打开iconfont官网页面

第二步：找到你想要的图标，并加入购物车，点开右上角的购物车，并选择添加至项目（用github登录），并创建一个文件夹之后按照如图所示复制代码

第三步：在html的head标签里嵌入link标签，将第二步复制的代码填写到link的href属性中，并在前面加上http:

第四步：复制你所需图标的代码

第五步：使用图标时，给标签添加上class属性，属性值为iconfont+第四步复制的代码

<!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>iconfont</title>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2748930_yqyf38bg3ds.css">

</head>

<body>

    <div class="content">

        <span class="iconfont icon-wenjian">文件</span>

    </div>

</body>

</html>

运行结果：