uniapp如何引用外部阿里图标

最新推荐文章于 2025-03-16 00:43:42 发布
最新推荐文章于 2025-03-16 00:43:42 发布
阅读量1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 # 功能用法 文章标签： css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pgzero/article/details/106046835
本文介绍如何在项目中引入在线字体，并提供了一个具体的@importurl语法示例。但值得注意的是，此方法可能不适用于由uniapp编译的小程序，针对小程序的兼容性解决方案已给出链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、点击在线链接并复制在线链接
在这里插入图片描述
二、在App.vue或组件中引用此在线链接

@import url('//at.alicdn.com/t/font_1807822_atwi7s0ni6g.css');

三、组件中使用即可
在这里插入图片描述
（注：此方法不兼容uniapp编译成小程序，如需兼容小程序请看跳转此文章https://blog.youkuaiyun.com/pgzero/article/details/106022225）

uniapp - 引入使用阿里图标后在移动端显示“文件查找失败“不显示问题，但在h5端平台却可以正常显示（uniapp引入iconfont文件报错文件查找失败：./iconfont.woff?t=）
高级前端工程师
02-01 2333
uniapp，h5，移动端，阿里图标库，阿里巴巴图标，uniapp使用阿里图标库不显示怎么办，解决uniapp引入阿里图标报文件查找失败，uniapp报错iconfont文件报错文件查找失败，uniapp移动端不显示阿里图标， uniapp app中阿里图标库不能使用，uniapp项目中iconfont阿里云图标不显示，uni-app引入阿里矢量图在移动端不显示的问题，移动端不显示但在h5网页能显示，阿里图标在移动端无法显示怎么办，如何解决uniapp引入阿里图标后在h5能显示，但在移动端平台却不显示，un
uniapp 引入阿里巴巴矢量图
wy_319的博客
11-17 2364
1、先在阿里巴巴矢量图网站添加自己喜欢的图标（网址：iconfont-阿里巴巴矢量图标库） 每完成红箭头的第一步 右上角购物车会增加一条 2、选择完成后，点击右上角的购物车会出现以下界面 3、选择添加至项目，没有项目的话，箭头位置新建，然后确定 4、 确定后跳转至以下界面，并且点击“下载至本地” 5.找到下载的文件，把其中的：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2 放在static下的iconfont(新建)..
uniapp引入阿里图标库
active_pig的博客
10-04 1677
平时项目开发肯定少不了图标的使用，除了自己定制图标库之外，再一个比较不错的就是使用阿里的图标库，这里包含了很多分类的图标，基本上你想用的图标它都有，不仅好看，使用起来也是非常方便的，下面一起来看看吧。你进入这个官网以后，挑选自己喜欢的图标后添加到自己的项目中，没有项目的随意建一个新的，新图标首先先加入购物车，然后到时候一块添加到项目中。这个就是图标的代码，每个不同的图标都不一样，这个可以自己尝试一下。官网地址：https://www.iconfont.cn/
uni-app如何引入阿里图标库 （其他项目一般都通用）
wangongchao的博客
06-30 5977
uniapp引入阿里图标库，话不多说，代码走起！！！！ 第一步：www.iconfont.cn/进入阿里图标库官网 第二步：把购物车中的图标添加到项目中，这个项目是在阿里图标中建立的一个文件夹，如果之前没有建立过，可以点击添加项目，项目名字随便写 第三步：右上角点击随便建个项目，为的是下边我们修改在线地址，方便查看复制在线地址所用，跟你所写的uniapp项目并无关联，随便写就好，最后还要下载到本地。 第四步：去下载的代码中找到iconfont.css这个文件复制粘贴到你自己的项目中去 第三步：在你的
uni-app（使用阿里图标）
小林的博客
03-28 1803
uni-app，使用自定义图标
uniapp引入iconfont(阿里图标库)
曳猫的博客
04-28 1859
uni引入阿里图标库(iconfont) 1 首先找到自己要的图标 2 添加入库 3 添加到项目（选择或者新建项目添加） 4 下载到本地 5 解压下载的压缩包 6 复制iconfont.css 到项目 复制到项目的common 7 iconfont.css文件添加 以下代码 text[class*="icon-"], view[class*="icon-"], button[class...
不用学习直接编写uni-app(页面中引用 引用(本地)阿里图标库的问题)
sinat_34136619的博客
05-16 1795
1、把阿里图标通过项目打包方式下载到本地，拷贝到uni-app项目的如下目录。 ​​ 2、在需要引用的XXX.vue页面文件中添加如下代码。 在<style>标签中添加 /* icon图标 */ @font-face { font-family: iconfont; font-weight: normal; font-style: normal; src:...
uniapp 阿里图库图标引用
qq_41241504的博客
06-30 579
uniapp 阿里图库图标引用
uView 扩展图标(使用阿里iconfont图标)
weixin_47218793的博客
09-29 3850
uView引用阿里图标 步骤如下 1.登录iconfont-阿里巴巴矢量图标库网站,把自己需要得图标添加到购物车里 2.把图标添加到你的项目(没有的话就新建一个项目) 3.在导航栏找到资源管理-----我的项目 4.点击项目设置,配置图标前缀(Font Family名称比FontClass/Symbol前缀少一个 - ) ,保存 5.点击 下载本地,把下载的文件解压 6.在uniapp项目根目录新建一个文件夹(我的叫common/cs...
UNI-APP 添加顶部导航栏并且更换图标
一尾流莺 半世情缘
10-21 5001
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。 要实现的最终效果图： uni-app 在page.json里的配置项 { "path": "pages/chat/list", "style": { "navigationBarTitleText": "45things", "app-plus": { "titleNView.
uniapp中引入阿里图标
GeniusMao的博客
08-17 608
一.在uniapp中发现，以往H5的阿里使用步骤失效了： 1.把图标加入购物车，在购物车里添加至项目，选择下载至本地 2.把文件夹里除了html和demo的全部粘贴至软件 3.link引入iconfont.css,在html文件中查看图标编码 4.<i class="iconfont">图标编码</i> 用i.iconfont{ fontsize}调整图标大小或者用类 <i class="iconfont 类名"> </i> 或伪类 li：：befo.
在 uniapp 中使用阿里图标
糜家智の博客
07-05 4776
uniapp 使用阿里图标
uniapp引入自定义图标
weixin_52102740的博客
07-24 1264
uniapp自定义图标
uniapp项目或者vue项目引入阿里图标库
最新发布
weixin_51591826的博客
03-16 847
在官网把新添加的图标加入项目，然后下载文件，更换掉项目之前的文件，注意路径要修改为绝对路径。回到首页，对想要的图标进行搜索，会出现一大批相关的图标，选中符合需求的图标并添加入库。确定添加之后会跳转到我的项目这里，选择font class，然后下载到本地。如果新图标没有渲染成功，则可能是缓存的原因，可以重启项目，一般就可以解决了。入库成功后，可以在导航栏点击购物车图标进行查看并添加到刚刚新建的项目当中。登录完成之后点击资源管理中的我的项目。
uniapp引用阿里图标库图标
weixin_42148384的博客
07-08 561
uiapp中引用阿里图标库图标，胎教级教程
uni-app添加外部Iconfont图标-过程很坎坷
热门推荐
qq_1905369638
08-20 1万+
uni-app添加外部Iconfont图标-过程很坎坷 第一次用Markdown写博客，有点不习惯，但总归要习惯的，哈哈。 昨天在uniapp用到图标，发现阿里的图标不错，想拿来用一下，出现了问题就是样式没引用成功，在微信开发者工具上只看到一个小正方形，不管样式是放在App.vue进行全局引用，还是在页面的style里面引用，发现对应的图标就是完全不显示，下面来说说大概过程。。。 其实在style...
uni-app中使用阿里图标具体流程。
zhiqvyunxvci的博客
08-11 268
uniapp配置添加阿里巴巴图标icon流程步骤
はんみん的博客
08-19 1025
uniapp配置添加阿里巴巴图标icon流程步骤
uniapp引入阿里巴巴矢量图标库
m0_73075579的博客
05-09 506
第一部分：创建矢量图标库1.登录阿里巴巴矢量图标库，点击导航栏的资源管理-我的项目。2.点击右上角加号图标创建。3.根据实际情况填写信息，点击新建。 4.现在项目名为wx-app的图标库就已经创建完成，在刷新页面后，可以在“我发起的项目”中看到。第二部分：添加图标至图标库1.可以在首页进行搜索，寻找自己所需要的图标。2.这里点击搜索关键词“箭头” ，进入搜索结果页。3.将鼠标移动到我们想要添加的图标上，点击购物车，将图标添加进购物车。 4. 点击导航栏的购物车，可以看到我们刚才添加的图标，点击下方的添加至
uniapp引入字体库
11-30
UniApp引入字体库通常涉及以下几个步骤： 1. **下载字体文件**：首先，你需要从外部网站如Google Fonts、阿里巴巴矢量图标库等下载需要使用的字体文件。一般选择.ttf或.woff2格式。 2. **将字体文件放入项目资源目录**：在UniApp项目的`assets/font`目录下，将字体文件放好，这通常是项目的静态资源存储位置。 3. **配置字体链接**：在uni-app的全局样式表`index.wxss`或`.vue`文件中，添加`@font-face`规则来引用字体。例如： ```css @font-face { font-family: 'YourFontFamily'; src: url('@/assets/font/your-font.ttf') format('truetype'); /* 或者 woff2格式 */ src: url('@/assets/font/your-font.woff2') format('woff2'), url('@/assets/font/your-font.ttf') format('truetype'); font-weight: normal; font-style: normal; } ``` 4. 使用字体：现在可以在CSS中通过`font-family`属性引用这个自定义字体了。比如在`.your-class`上设置： ```css .your-class { font-family: 'YourFontFamily', sans-serif; } ``` 记得替换上述示例中的`YourFontFamily`和实际的文件路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值