62iconfont

最新推荐文章于 2022-09-23 14:52:04 发布

广东码农

最新推荐文章于 2022-09-23 14:52:04 发布

阅读量308

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/117899229

版权

html+css 专栏收录该内容

82 篇文章

订阅专栏

本文介绍了在前端开发中选择图标库时的版权问题。fontawsome虽然图标较少，但其免费图标使用无版权困扰；而iconfont图标丰富，但需谨慎处理版权，建议先联系作者确认。文章详细阐述了在iconfont官网下载并引入图标到项目中的步骤，并提供了代码示例。

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

注意

font awsome虽然图标丑，图标数量少，但是用上面的免费图标，版权没有问题。
iconfont虽然图标多、好看，但是版权不明确，如果实际工作中需要用到的话，最好是先联系下作者，确定版权没问题再用。

iconfont使用

来到iconfont官网，然后找到我们想要的图标，然后点击加购物车
选择所有想要的图标之后，我们点击右上角的购物车图标，然后点击下载代码（当然也可以点击添加至项目，不过会麻烦一点，要再去我的项目那里下载代码）
下载代码之后，解压出来，是下面这样的一个文件夹

demo_index.html里面是使用手册，介绍了几种使用方法，可以看看。实际使用可以把demo_index.html、demo.css删了
将iconfont.css、iconfont.js、iconfont.json、iconfont.ttf复制到我们的前端项目里面（这里我创建一个iconfont文件夹去存放）
在html中引入iconfont.css

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

这里演示demo_index.html其中一种使用方式

<!DOCTYPE html>
<html lang="ch">
<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="./iconfont/iconfont.css">
    <style>
        .fontimg {
            font-size: 100px;
            color: tomato;
        }
    </style>
</head>
<body>
    <span class="fontimg iconfont" >&#xe8a9;</span>
</body>
</html>