cdn引入的iview UI框架——自定义icon（iconfont）

原创 已于 2022-03-26 17:12:47 修改 · 849 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript #css3 #前端
于 2022-03-13 23:18:39 首次发布
本文介绍了如何将自定义的icon添加到购物车并下载到本地，将其引入项目中进行使用。通过在需要的地方引入iconfont.css，并在i标签上添加相应类名，可以成功显示图标。

先把自己要添加的icon加入购物车，最后添加至项目

再选择Font class 下载至本地

放入项目文件夹中，命名成啥都行你喜欢，引入时你能找到就好，我这里命名为"iconfont" 

然后在需要用到的地方引入

 用到时，根据引入的iconfont.css这两个类名

在i标签的class属性加上这样两个类名即可

显示成功！ 

大浩籽
关注
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8766
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp使用iconfont字体图标
i_am_a_div的博客
03-11 1395
情景1：使用灰色的字体图标 步骤1：下载iconfont 步骤2：解压后只需要将ifonfont.css这一个文件 ，单独的放在你的项目的static>fonts下的某个文件下 步骤3：找到你项目下这个iconfont.css，修改样式，将其他url全部删除，只保留base64的那个url 且这个url最后的逗号,也需要删除 删除前的css： 删除后的css： 步骤4：引入： 注意:src字段的url的括号内一定要使用单引号 ①引入位置：你可以直接在app.vue内引入；也可以在main.
渐进一致性蒸馏：多模态大语言模型对齐新方法
最新发布
weixin_30908103的博客
04-29 1274
多模态学习是AI领域的重要研究方向，旨在让机器像人类一样整合视觉、语言等不同模态信息。传统硬对齐方法强制不同模态共享嵌入空间，但容易造成模态特性丢失和训练不稳定。渐进一致性蒸馏创新性地采用分阶段知识迁移策略，通过模态特定编码器保留各模态特性，配合渐进对齐权重调度和一致性蒸馏目标，实现更自然的跨模态协同。该方法在VQA、图像检索等任务中显著提升性能，特别是在零样本迁移和细粒度推理场景展现优势。关键技术包括动态温度系数InfoNCE损失、层级注意力匹配等，为多模态大模型训练提供了新的工程实践方案。
前端学习（205）:animation动画库
歌谣的博客
12-24 730
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
在ui组件中引入iconfont
qq_38998319的博客
11-26 767
https://shimo.im/docs/XcdrxKQCGKTVGcgP/ 《在ui组件中引入iconfont》，可复制链接后用石墨文档 App 或小程序打开 如何在vant 组件中使用自定义icon 1.创建项目 2.将图标加入购物车 3.点击购物车将购物车图标添加到项目中 4.选择font class,生成代码 5.点击链接获取代码 6.在public文件中建css文件,建icon.css,将获取的代码复制到文件中 7.App中引.
解决uview离线环境下内置icon无法显示的问题
qq_33678837的博客
04-18 6924
在一次使用uniapp + uview做app项目的时候发现uview内置的icon在离线环境下显示不出来，项目也已经接近后期了，不想改太多东西。 通过查看u-icon组件源码可以发现内置的icon是引入在线的阿里巴巴iconfont， @font-face { font-family: 'uicon-iconfont'; src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf')format('...
解决uview2 u-icon图标不显示问题，亲测必行
lianghuihaoKing的博客
11-03 7571
我相信很多童鞋也遇到这个情况，uview2 用在微信上其他控件都好好的，u-icon愣是不显示图标。首先原uview-ui/components/u-icon/u-icon.vue这里有个获取ttf加载字体的地方无论小程序是否正常访问到链接，或者下载ttf下来，放到小程序static文件夹里，都不好使。后来看到网上有离线情况下访问字体的方法，决定一试。咦咦咦，竟然好使了，凸凸 太棒辣！详细流程如下：看文章哈
uview-ui_iconfont.css
热门推荐
qq_37707731的博客
01-14 10万+
/* #ifdef APP-PLUS */ @font-face { font-family: "uicon-iconfont"; font-weight: normal; font-style: normal; font-display: auto; src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAGQYAAsAAAAAw2gAAGPEAAEAAAAAAAAAAAAA...
使用CDN的方式使用Vue 和 iview构建vue项目
追逐丶的博客
01-28 1万+
使用CDN的方式使用Vue 和 iview构建vue项目一、CDN的方式是什么二、为什么采用cdn的方式三、过程1 引入vue.js和iview。2 基本功能3 组件功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaT......
iconfont的使用（最详解）
富朝阳的博客
02-20 1万+
Iconfont 是阿里巴巴矢量图标库平台（http://iconfont.cn），它允许用户访问大量图标并将它们用作网页、移动应用或其他数字界面的一部分。以下是关于 Iconfont 的介绍和使用
如何使用iconfont的CDN（细讲）
qq_42964517的博客
12-26 5792
如何使用iconfont的CDN iconfont作为阿里的图标库，在开发过成功用的已经是非常广泛了，但iconfont并不需要将图标下载后使用，而是可以直接用cdn引入使用，至于使用流程，请看下文。 http://www.iconfont.cn/ 搜索想要的图标，点击加入购物车。 在加入购物车之前，如果没有在iconfont简历图标库的小伙伴还需要先建立一个图标库。 点击图标管理，里面有项目，...
uniapp，uview icon加载太慢了，老是显示叉叉，将远程加载改到本地加载。
PrimaryColor
07-28 398
下载文件：从node_modules找文件u-icon.vue文件。如下，通过远程链接地址下载字体文件。处理方式：将远程字体文件下载到本地进行加载。
iconfont图标字体库详细介绍
Jinuss的博客
09-03 5858
iconfont的使用方式，最详细的教程
【Uniapp】解决uView2.0离线状态下icon图标不显示的问题
VT_馒头的博客
07-17 6820
在uniapp + uView的项目中，在web端、模拟器端都显示正常，但是在真机，内网环境，不能访问外网的环境下运行时，icon图标就无法显示，很明显，原因肯定跟网络有关，于是乎去看了一下uView的源码，发现在uview-ui/components/u-icon/u-icon.vue有一个引入在线的阿里巴巴iconfont的url，因此需要将这个远端ttf字体文件改为本地能够获取到的数据。
vue项目 + iview 引入cdn
z_e_o_y的博客
10-16 2340
vue项目 + iview 引入cdn 背景 vue cli + webpack 项目，使用build后，vendor包过大，因此使用cdn将静态的资源放到cdn服务器上。 步骤 open build/webpack.base.conf.js 将下列代码添加到module.exports中 externals: { ‘vue’:‘Vue’, ‘vuex’:‘Vuex’, ‘vuex’:‘Vuex...
通过CDN方式使用iView框架
LvFengBing_23的博客
04-13 5250
通过CDN方式使用iView框架 html页面导入： <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min....
低调的css3属性font-size-adjust
weixin_30404405的博客
11-06 261
在我们日常的项目中经常会用到不同的字体来达到我们想要的效果，可是某些情况下不同字体的大小在相同的px下显示的大小是不同的 <div id="div1">Text 1</div> <div id="div2">Text 2</div> <div id="div3">Text 3</div> <div id="d...
vue引入iconfont的方式
TZ1284063988的博客
12-09 1874
这里写目录标题1.通过引入cdn实现2.通过引入静态样式文件实现 1.通过引入cdn实现 1.加入项目后选择font css 2.index.html引入 <link rel="stylesheet" href="//at.alicdn.com/t/font_2174515_1wy2zflzlu9.css"> 3.页面使用 <span class="iconfont icon-zhuye"></span> 2.通过引入静态样式文件实现 1.浏览器打开上面的链接，复
cdn方式引入element-plus icon
jerryyang_2017的博客
07-06 4994
浏览器直接引入element-plus使用icons-vue cdn引入element-plus使用icons-vue cdn引入element-plus使用icons 浏览器引入直接使用element-plus的icons
使用cdn和npm引入的区别_Vue的iView框架使用Cdn链接或npm的引入的使用方式
weixin_39993322的博客
12-19 1588
iView 是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。1、iView的特性1) 高质量、功能丰富2) 友好的API ，自由灵活地使用空间3) 细致、漂亮的 UI4) 事无巨细的文档5) 可自定义主题2、iView的安装：1) 使用npm：npm install --save iview2) CDN引入：3、引入 iView1) 一般在 webpack 入口页面 mai...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值