如何在uni-app中引入iconfont图标

短命女 2022-03-06 13:44 672阅读 0赞

如何在uni-app中引入iconfont图标

# step1 #

在iconfont中找到你要的图标，这里和vue其他地方引用的步骤一致，如果是第一次使用iconfont请自行百度使用方法，因为我一直使用的在线链接方式引入，所以这里也只介绍这种方式引入uni-app

## step2 ##

把下面的代码放在app.vue里面

/* icon图标 */
        @font-face { 
    	  font-family: 'iconfont';  /* project id 1095188 */
    	  src: url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.eot');
    	  src: url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.eot?#iefix') format('embedded-opentype'),
    	  url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.woff2') format('woff2'),
    	  url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.woff') format('woff'),
    	  url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.ttf') format('truetype'),
    	  url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.svg#iconfont') format('svg');
    	}
        .icon { 
          font-size: 24upx;
          color: #000000;
          font-family: iconfont;
        }
        .icon-warning:before {  // 需要使用的图标
    		content: '\e604';
    		font-size: 48upx;
    	}
    
    
    <text class="icon icon-warning"></text>

## tips ##

**@font-face** 里引用链接必须加上*https*，从*iconfont*网站复制过来的代码是默认没有的，亲测在app端是必须的！

发表评论取消回复

表情：

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

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

相关阅读

相关 uni-app中如何引入阿里iconfont图标字体(详细教程)

最近的项目中用到了iconfont字体，虽然之前已经用过很多次了，但是一直没有认真的整理过，所以这次就整理一下吧。 1. 进入iconfont首页，在这里可以选择自己想要在

落日映苍穹つ/ 2023年01月17日 04:56/ 0 赞/ 529 阅读

相关在 Hexo 中使用 iconfont 图标

> [iconfont首页][iconfont] iconfont 获取可以先在首页搜索你想要的图标，然后添加到购物车中，然后把购物车中的图标添加到项目中，如果

系统管理员/ 2023年01月08日 02:15/ 0 赞/ 301 阅读

相关如何引入iconfont的字体图标

首先在[阿里巴巴矢量字体图标库。][Link 1] 把你想要的图标加入购物车。然后点击进入购物车的界面。看到有个下载代码。然后我们就会得到一个文件夹。我们把文件夹里的css。

水深无声/ 2022年12月20日 05:35/ 0 赞/ 283 阅读

相关 UNI-APP中引入阿里iconfont矢量图标库

1、下载 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

绝地灬酷狼/ 2022年11月12日 09:37/ 0 赞/ 238 阅读

相关 vue中如何使用iconfont图标

vue中引入iconfont图标引入在线链接文件如果开发过程中需要不断更新图标，为了避免多次下载文件到本地，可以先选择使用在线链接的图标文件前面的步骤就不赘

本是古典何须时尚/ 2022年11月05日 08:31/ 0 赞/ 231 阅读

相关 vue中引入iconfont图标

vue中引入iconfont图标本文的主要目的是介绍如何在vue中引入iconfont图标。 1、首先需要登录iconfont官网。 http://www.icon

r囧r小猫/ 2022年06月05日 02:59/ 0 赞/ 373 阅读

相关如何在uni-app中引入iconfont图标

如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标，这里和vue其他地方引用的步骤一致，如果是第一次使用iconfont请自

短命女/ 2022年03月06日 13:44/ 0 赞/ 673 阅读

相关 vue工程中引入iconfont图标库

工程中添加图标库 1.在iconfont.cn中登录账号（[https://www.iconfont.cn/）][https_www.iconfont.cn] 2.

你的名字/ 2021年11月04日 15:08/ 0 赞/ 417 阅读

相关 uniapp iconfonts的引入以及使用

1.去阿里巴巴矢量图库创建项目 [https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a][https

深藏阁楼爱情的钟/ 2021年09月18日 11:48/ 0 赞/ 355 阅读

相关 uniapp使用iconfont字体图标

情景1：使用灰色的字体图标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

た入场券/ 2021年07月24日 13:40/ 1 赞/ 714 阅读