阿里巴巴矢量图标库字体图标的下载与使用

偏执的太偏执、 2021-11-04 14:04 739阅读 0赞

#### 1、进入阿里巴巴矢量图标库：[http://www.iconfont.cn/][http_www.iconfont.cn] ####

#### 2、把需要的图标加入购物车 ####

#### 3、点击旁边的购物车，点击最下面的下载代码，download.zip。 ####

#### 4、代码下载完成后进行解压，找到ttf文件在这里进行转换：[https://transfonter.org/][https_transfonter.org]，选择base64格式 ，转换步骤见文末(\*╹▽╹\*) ####

**5、引入至样式文件**

① 把转换后下载的压缩包解压，把 stylesheet.css 中的@font-face引入自己的 css

@font-face \{

font-family: 'iconfont';

src:

font-weight: normal;

font-style: normal;

\}

② 最初下载的 download.zip 中的 iconfont.css 中的 iconfont 引入自己的 css

如：

.iconfont \{

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

\}

.icon-jian:before \{ content: "\\f000f"; \}

.icon-jia:before \{ content: "\\e623"; \}

.icon-paperplane:before \{ content: "\\e617"; \}

**6、在标签<span class='iconfont  icon-baihuo'></span>中使用**

![Image 1][]

如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！

转载于:https://www.cnblogs.com/CatcherLJ/p/11171809.html

[http_www.iconfont.cn]: http://www.iconfont.cn/
[https_transfonter.org]: https://transfonter.org/
[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，739人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序之使用阿里巴巴矢量图标库(Iconfont)

里巴巴矢量图标库(Iconfont)可以说是我们后台程序猿们的福音，对应我们这些不会做图，有对项目审美有洁癖的人来说，没有一个漂亮的界面，我们真的看不下去，我个人也是非常...

Love The Way You Lie/ 2024年04月18日 05:04/ 0 赞/ 40 阅读

相关 uni-app 引入 iconfont - 阿里巴巴矢量图标库

1. 登录iconfont - 阿里巴巴矢量图标库，在资源管理 - 我的项目里复制代码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

朱雀/ 2023年01月06日 01:13/ 0 赞/ 252 阅读

相关 Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库

最近在使用`vue-element-admin`开源项目进行系统开发，但是在引入第三方图标库的时候，出现了一些问题，百度找了找，也没有找到自己想要的答案，最后经过多次尝试，将问

谁借莪１个温暖的怀抱￠/ 2022年05月18日 04:49/ 0 赞/ 784 阅读

相关 MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标首先介绍介绍一下，前端必备的非常强大的阿里巴巴矢量图标库：地址是：[http://www.iconfon

忘是亡心i/ 2022年04月17日 03:35/ 0 赞/ 412 阅读

相关阿里巴巴矢量图标使用步骤PC

1.打开阿里网址 [https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a][https_www.ic

以你之姓@/ 2022年02月28日 15:38/ 0 赞/ 365 阅读

相关【Canvas】字体图标二、 Iconfont-阿里巴巴、矢量图标库

![在这里插入图片描述][70] 在Canvas中使用字体图标主要整理了两大类方法，第二种：使用 Iconfont-阿里巴巴、矢量图标库里的 Unicode编码

小鱼儿/ 2022年02月23日 00:04/ 0 赞/ 624 阅读

相关阿里巴巴矢量图标库 iconfont图标的使用

step 1:搜索阿里巴巴矢量图标库官网（https://www.iconfont.cn）,然后注册登录,或者用github，微博登录也行,此步骤跳过; step

谁借莪１个温暖的怀抱￠/ 2022年02月02日 11:13/ 0 赞/ 468 阅读

相关 Iconfont-阿里巴巴矢量图标库

1、可以对单个图标下载，下载PNG图片应用到项目中去。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

本是古典何须时尚/ 2021年11月16日 19:52/ 0 赞/ 542 阅读

相关阿里巴巴矢量图标库字体图标的下载与使用

1、进入阿里巴巴矢量图标库：[http://www.iconfont.cn/][http_www.iconfont.cn] 2、把需要的图标加入购物车 3、点击旁

偏执的太偏执、/ 2021年11月04日 14:04/ 0 赞/ 740 阅读

相关 vue 项目中使用阿里巴巴矢量图标库iconfont

原文：[https://www.jianshu.com/p/38262f18eee2][https_www.jianshu.com_p_38262f18eee2] 1.打开

ゞ浴缸里的玫瑰/ 2021年10月29日 08:26/ 0 赞/ 574 阅读