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
在这里插入图片描述

相关文章
|
6天前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
|
1月前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
1月前
|
供应链 JavaScript 数据管理
uniapp/vue如何实现一个子表单及子表单作用
uniapp/vue如何实现一个子表单及子表单作用
32 5
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
88 5
|
2月前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
1月前
|
数据可视化 搜索推荐
重磅更新-UniApp自定义字体可视化设计
重磅更新-UniApp自定义字体可视化设计
39 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
127 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
设计模式 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
|
3月前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7