uniapp vue和Nvue使用外部字体iconfont

简介: uniapp vue和Nvue使用外部字体iconfont

uniapp如何引入iconfont字体图标
1,选择好的图标添加到购物车,在购物车选择 font class =>下载至本地
在这里插入图片描述
2,在本地打开下载的iconfont.css文件进行复制到所需要的项目

    eg:一般uniapp都是放在common==>css中
    ![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/fd0cd08b0feb41ed8322266978931290.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQOWwj-acseWRgOi3rw==,size_20,color_FFFFFF,t_70,g_se,x_16)

3.删除多余的
在这里插入图片描述
4.最后使用
在这里插入图片描述
Nvue引入自定义字体
在这里插入图片描述
在App.vue的onLaunch引用
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {

'fontFamily': "iconfont",//fontFamily自定义名字
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"  //可以在官网iconfont的Unicode引入

});
在这里插入图片描述

Nvue使用Unicode的
在这里插入图片描述
class="iconfont" 是上面的domModule.addRule定义的fontFamily
在这里插入图片描述

相关文章
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
2177 18
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
597 1
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
728 0
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
1045 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
462 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
供应链 JavaScript 数据管理
uniapp/vue如何实现一个子表单及子表单作用
uniapp/vue如何实现一个子表单及子表单作用
542 5
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
694 5
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
422 7

热门文章

最新文章