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

已于 2022-03-26 17:12:47 修改
阅读量670 收藏
点赞数
文章标签： javascript css3 前端
于 2022-03-13 23:18:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52309519/article/details/123468664
版权

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

再选择Font class 下载至本地

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

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

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

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

显示成功！ 

大浩籽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
weixin_35668334的博客
01-14 518
前言iconfont阿里巴巴矢量图标库是我很喜欢的一个网站，可以下载/在线编辑/上传自己需要的矢量图标，也支持团队协作，那么在mpvue项目中如何引入呢？将图标加入购物车搜索关键词可以是中文也可以是英文下载素材点击网站右上角的购物车图标，此处我们选第三个ps:添加到项目很有用，可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等，此处我们选择加入项目并下载代码文件解压一般网页中为了兼容性考虑，我...
uview 的u-icon组件 报错Failed to load local font resource 或Failed to load font
lfeishumomol的博客
06-09 1910
问题: 字体图标在h5显示正常,但是在微信小程序显示错误由于设置了合法域名仍然失效,所以决定直接弄到本地uview 导入的是远程字体图标。uview 的u-icon组件 报错Failed to load local font resource 或Failed to load font,2.对不需要的字体图标进行删减
uview-ui_iconfont.css
热门推荐
qq_37707731的博客
01-14 5万+
/* #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...
2024年前端最全最佳Icon图标库推荐，收藏等于学会，阿里巴巴面试很难吗
最新发布
2401_84619342的博客
05-13 1618
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
低调的css3属性font-size-adjust
weixin_30404405的博客
11-06 170
在我们日常的项目中经常会用到不同的字体来达到我们想要的效果，可是某些情况下不同字体的大小在相同的px下显示的大小是不同的 <div id="div1">Text 1</div> <div id="div2">Text 2</div> <div id="div3">Text 3</div> <div id="d...
解决iview菜单使用iconfont图标无法显示的问题
lvdou1120101985的博客
09-28 1万+
写在前面： 首先，我出现问题的场景是使用在导航菜单上，即 Menu Item； 其次，我是使用json文件递归生成的菜单列表，在meta属性中设置的icon；   今天在使用iconfont的图标作为菜单的图标时发现总是显示成方框框 使用方法和设置Button的图标是一样的，检查了好久也没有发现问题，百思不得其解…… 使用F12检查元素，发现原来框架是在样式前面加上了 iv...
iview 如何建立图标库？前端开发，
jjj_fl的博客
12-04 2217
我是根据自己的实际项目写的流程，如有不一样请谅解···· 1. 首先准备一套png/jpg图标 2. png/jpg要转成矢量图.svg格式的失量图标 (1)线转不太好用：这是我自己找的一个工具Vector Magic破解版（能批量操作） https://pan.baidu.com/s/1xyKXhuKTl7-eOWA4DCNctA 提取码: h1wm 破解方法 解压后先点KEYGEN 1.15....
vue+mintui 省市县3级联动 cdn引入
12-26
本文将深入探讨如何使用 Vue 和 MintUI 实现省市区三级联动，并通过 CDN 引入来优化加载速度。 Vue.js 是一个轻量级的JavaScript 框架，它提供了组件化开发模式，使得代码结构清晰、可复用性高。MintUI 是基于 Vue ...
详解mpvue小程序中怎么引入iconfont字体图标
10-17
在开发基于mpvue框架的小程序时，引入iconfont字体图标是一项常见的需求，因为这样可以方便地使用丰富的矢量图标资源。下面将详细讲解如何在mpvue小程序中引入iconfont字体图标。 首先，我们需要访问阿里巴巴矢量...
轻量级UI框架：一个简洁轻量级的 UI 框架，它提供了最基本的组件和 CSS 样式
04-30
**轻量级UI框架——Slint的深度解析** 在当今前端开发领域，UI框架扮演着至关重要的角色，它们为开发者提供了快速构建用户界面的基础组件和样式。其中，“轻量级UI框架：一个简洁轻量级的 UI 框架，它提供了最基本...
基于 Vue3.0 框架的模拟Windows 桌面效果，后台管理UI
11-05
在"基于Vue3.0框架的模拟Windows桌面效果，后台管理UI"项目中，开发者利用Vue3.0的特性来创建一个类似Windows操作系统桌面的交互体验，用于后台管理界面。这个项目展示了Vue3.0在构建复杂、可定制化用户界面时的强大...
CDN - Elment UI - 源码
02-06
CDN - Elment UI - 源码
uview2.0 如何自定义图标
weixin_44179923的博客
12-12 3117
首先去iconfont这个网站添加自己想要的图标，然后下载下来 把ttf文件放到根目录 static/iconfont.ttf 把css放到根目录的common/iconfont.css 打开App.vue 文件 修改成下面 <script> export default { onLaunch: function() { // #ifndef MP const domModule = weex.requireModule('dom') domModule.add.
CDN方式使用iview
weixin_34025151的博客
01-13 670
如果没有使用webpack,可以使用我们提供的工具iview-theme来编译 首先需要安装主体生成工具，从npm全局活在项目中局部安装 以全局安装为例： npm install iview-theme -g 然后在业务工程里新建一个目录，用来存放主题文件， 使用下面的命令初始化主题，这时会从iView仓库拉取最新的额 样式文件 iview-theme init my-theme 最后编辑my-...
IView入门练习~CDN模式全局加载JS
dgsf92885的博客
09-08 408
关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。 特性 高质量、功能丰富 友好的 API ，自由灵活地使用空间 细致、漂亮的 UI 事无巨细的文档 可自定义主题 以上内容乃是摘抄官网介绍，懒的写，以下代码以记录最近学习的一些问题解决，IViewUI入门练习~CDN模式全局...
cdn引入vue + iview 使用select、date等组件下拉选项不显示问题和Checkbox数组循环选中不更新问题
mini_yangmi的博客
03-21 1008
不显示解决方法：设置属性 transfer="true"解决问题 选中问题解决方法： 循环的时候key不要用index
html 方式使用iview,CDN方式使用iview
weixin_29292535的博客
06-26 221
IOS UIWebView截获html并修改便签内容&comma;宽度自适应需求:混合应用UIWebView打开html后,UIWebView有左右滚动条,要去掉左右滚动效果: 方法:通过js截获UIWebView中的html,然后修改html标签内容: 实例代码: 服 ...django 学习-4 模板标签1.第一个标签是 if 标签 vim learn/home.html...
vue组件库vant-ui和iview组件库使用中遇到的问题小结
baidu_41601048的博客
09-25 1万+
1 最近项目需要临时做一个调查问卷页面。考虑到性能和复杂度，决定通过使用cdn方式编写该页面。 效果如下： 移动端采用vant.ui 遇到的问题： （1）通过cdn方式进行开发的时候，引入官网的链接。查看network会报302错误。 <link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index...
vue使用cdn引入element-ui
06-28
可以使用cdn引入Element UI，方法是在HTML页面中添加Element UI的CDN链接，例如： ``` <!DOCTYPE html> 使用cdn引入Element UI <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值