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

在做网站的过程中难免会使用到各种小图标，现在总结一个使用阿里图标转成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/

将阿里图标iconfont转成css代码显示相关推荐

如何在网页中使用阿里图标iconfont（2022最新版详细）
阿里图标iconfont使用下载文件使用文件下载文件点击链接进入阿里iconfont官网,用手机号注册并登录. 选择资源管理->我的项目选择右边的紫色图标新建项目,填写项目名,其他的默 ...
vue引用矢量阿里图标iconfont详细步骤
1.登录阿里图标库:https://www.iconfont.cn/ 2.搜索你需要用的图标,加入到购物车 3.打开购物车,添加至项目 4.点击下载至本地 5.在项目中新建文件夹:src>ico ...
阿里图标在IE浏览器上不显示的问题
问题描述: 在本地编辑器上用IE和谷歌浏览器上运行,阿里图标都显示,(排除了兼容性问题).起服务运行时发现谷歌浏览器显示正常,IE浏览器上不显示. 报错如下: iconfont.eot @font- ...
自己摸索阿里矢量图标iconfont的用法之阿里图标怎么用（最简单）（多图预警）
话不多说,直接先上干货. 第一部分:阿里图标iconfont怎么用. 1,登录阿里图标官网 https://www.iconfont.cn/ 2,登录. 没号可以先注册.用微博或者GitHub登录的. ...
使用阿里图标库icon图标 ttf字体文件转化成base64格式
iconfont-阿里巴巴矢量图标库下载代码字体文件上传到下面网站 Online @font-face generator - Transfonter 下载转好的文件将以下代码复制到css 阿里 ...
Vue 使用阿里图标库代替element icon
一.创建阿里图标库项目打开网址:https://www.iconfont.cn/ ,找到[我的项目] 点击右侧文件夹[创建项目] 填写[项目名称],[FontClass]前缀填好后,后续使用icon ...
微信小程序使用阿里图标
方法一:使用本地文件 1 下载阿里图标到本地 http://iconfont.cn/ 2.转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参数, ...
uniapp引入阿里图标
uniapp引入阿里图标: uniapp引入自定义阿里图标库后在手机端不显示图标跟着我做: 第一步: 第二步: 第三步: 是的,你没看错,这样操作不太行,确实没有图标s #学习时间(正确): 第一步 ...
控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...

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

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

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

将阿里图标iconfont转成css代码显示相关推荐

最新文章

热门文章