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

短命女 2022-03-06 13:44 695阅读 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 条评论，695人围观）

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

相关阅读

相关 Webpack项目中引入IconFont图标

篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标。 IconFont官网：[https://www.iconfont.cn/][https_w...

ゝ一纸荒年。/ 2024年04月17日 14:33/ 0 赞/ 65 阅读

相关如何在uniapp中使用iconfont图标？

一步: 从iconfont下载icon图标 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly...

墨蓝/ 2024年04月17日 06:28/ 0 赞/ 96 阅读

相关 Uniapp引入彩色图标iconfont

1. 进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 ![阿里巴巴下载图标][7936f14a9fb41f

谁践踏了优雅/ 2024年03月26日 11:43/ 0 赞/ 101 阅读

相关在Uniapp中实现在线使用iconfont的图标

icanfont官网 iconfont官网：[iconfont-阿里巴巴矢量图标库][iconfont-] 在自己建的项目下：点击 Font Class 可以看到下面的

向右看齐/ 2024年03月17日 12:35/ 0 赞/ 102 阅读

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

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

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

相关 vue中引入iconfont图标

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

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

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

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

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

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

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

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

相关 uniapp iconfonts的引入以及使用

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

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

相关 uniapp使用iconfont字体图标

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

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