将阿里图标iconfont转成css代码显示

最新推荐文章于 2024-05-25 09:57:54 发布

今晚打脑斧

最新推荐文章于 2024-05-25 09:57:54 发布

阅读量1.1w

点赞数 3

分类专栏：前端文章标签：阿里图标 iconfont svg

本文链接：https://blog.csdn.net/SmileLvCha/article/details/86495431

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在做网站的过程中难免会使用到各种小图标，现在总结一个使用阿里图标转成css的方法。

1打开https://www.iconfont.cn网站，先登录账号，将自己需要的图标选择添加入库。
2在选择好自己所需要的图标后，点击下载代码
3新建一个txt文件，点重命名为demo.css。然后打开刚才下载的压缩包找到iconfont.css这个文件从.iconfont这里开始一直复制到最后。
4然后打开https://transfonter.org/这个网站，点击蓝色的add fonts按钮，打开刚才下载的压缩包中的iconfont.ttf文件，配置如图所示，然后点击convert按钮，转化完成后点击Download按钮。
5找到下载的压缩包中的stylesheet.css文件，将里面的代码全部复制到第3步中的demo.css的最前面
6然后新建个demo.html，就能查看到小图标了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
<i class="iconfont icon-zhifubaofukuan"></i>
<i class="iconfont icon-view-grid"></i>
<i class="iconfont icon-layout-tab-v"></i>
<i class="iconfont icon-bar-chart"></i>
<i class="iconfont icon-zhifubaofukuan"></i>
</body>
</html>

在这里插入图片描述

如果所下载的小图标都不是一个网站的情况，比如在百度也下载了小图标 http://fontstore.baidu.com/

1 进入http://fontstore.baidu.com/static/editor/index.html此网站，点导入svg。
2选中所有图标，点击设置代码点，然后可以给每个小图标命名，也可以用自动生成的默认命名，然后点击下载zip。
3接着上面的第三步

今晚打脑斧

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
将阿里图标iconfont转成css代码显示

在做网站的过程中难免会使用到各种小图标，现在总结一个使用阿里图标转成css的方法。1、打开https://www.iconfont.cn网站，先登录账号，将自己需要的图标选择添加入库。2、在选择好自己所需要的图标后，点击下载代码3、新建一个txt文件，点重命名为demo.css。然后打开刚才下载的压缩包找到iconfont.css这个文件从.iconfont这里开始一直复制到最后。4...
复制链接

扫一扫