创建属于自己项目的网页字体图标库

最新推荐文章于 2024-09-14 07:22:27 发布

海阳之新

最新推荐文章于 2024-09-14 07:22:27 发布

阅读量743

点赞数

分类专栏： HTML5 文章标签：项目字体图标库阿里矢量库

本文链接：https://blog.csdn.net/vsiryxm/article/details/51160022

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、注册阿里矢量库账号 http://www.iconfont.cn/，只能用阿里体系内的账号注册（如淘宝账号、新浪微博，自我保护主义严重）

2、登录后，在网页头部里找到图标库链接，点击打开，选几个图标放入购物车，这样做是为了在没有图标的情况下（后期可自主上传矢量图标即可），先拿几个现成的来做示例，然后点击存储为新项目或历史项目。如下图：

3、编辑项目，按项目需要来重新命名Font Class前缀、Font Family并保存，如下图：

图3-1

4、如图3-1操作步骤，将文件下载到本地，放入本地项目前端文件夹，如下图所示：

5、demo.html源码，图标必须以i标签引用，注意class的写法，class名称可查询iconfont.css（对应图标样子）：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>字体引用示例</title>
<link rel="stylesheet" href="font-vsstock.min.css">
<!-- 可将下载文件iconfont.css，重命名为项目字体名称，如font-vsstock.min.css -->
</head>

<body>
<i class="vcstock vs-myfill"></i>测试一下
</body>
</html>