uni-app 使用 Iconfont

最新推荐文章于 2024-04-20 05:50:22 发布

lwj_spider

最新推荐文章于 2024-04-20 05:50:22 发布

阅读量204

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44104648/article/details/110607625

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下载字体图表

在这里插入图片描述

通过样式来添加字体图标, 其他都可以删掉

在这里插入图片描述

引入样式

/* 在App.vue引入 */
@import './common/iconfont.css';

使用字体图标

<uni-nav-bar :statusBar="true" right-text="菜单" title="导航栏组件">
	<block slot="left">
		<view><view class="icon iconfont icon-gou"></view></view>
	</block>
</uni-nav-bar>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lwj_spider

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uni-app+iconfont 实现星级评分（vue）

qq_38170252的博客

07-08

6471

效果图需求点击星星进行评分，若评分低于三星，则展示问题原因，星级评分多少则高亮几颗星，所有选项均为必选项，评分完成后可提交表单，并把问题、星级分数、原因传给后台。因需求原因先做了星星组件的组件，其实可以将问题、星星、备注原因整合成一个组件，这里就主要记录星星评分组件的实现。 1. uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可...

移动应用开发——基于uni-app框架

m0_61839930的博客

06-17

860

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，

参与评论您还未登录，请先登录后发表或查看评论

uniapp 字体引入

MrHao_的博客

05-11

3507

uniapp 小程序引用字体官方链接我们用到的字体可能会很大，比如我用到的阿里普惠字体就有8M，这么大的字体不管是放服务器还是放小程序内都是很不友好的。推荐一个压缩插件 font-spider font-spider会帮我们剔除不需要的文体比如你需要某一个特殊字体，而项目中只有标题分类啥的可以用到那就推荐你使用这个。比如我项目只用到大概五十多个字。把文字写在html文件的div里面在html页面引入自己需要的特殊字体 font-spider会根据你页面使用到的字体和文字去压缩这样压缩完后，

uni-app中引入字体包

九段刀客的博客

02-28

4989

注意要用~@，用~在H5上显示正常在APP上将无效。 @font-face { font-family: 'FZQiaoMTJW'; src: url('~@/static/FZQiaoMTJW.TTF'); }

YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志

YDOOK

02-13

1095

YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志 © YDOOK JYLin 1. 将新 icon 文件拖入文件目录： ./public: 2. 新建或者在已有的 vue.config.js 文件根位置中输入： module.exports = { pwa: { iconPaths: { favicon32: 'ydook.ico', favicon16: 'ydook.ico',

uniapp引入第三方字体库如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案

@微你

01-10

3748

uniapp 开发小程序时怎么样使用第三方字体库（比如宋体、楷体等）呢

uniapp 解析 font 标签

Nonsense_man的博客

09-10

621

问题出现原因在PC端使用wangeditor富文本编辑器时设置字号大小后获取html 后发现设置字号的文本会被 font标签包裹在uniapp 端通过 rich-text 解析后发现样式并没有生效，字号也没有表现为了解决这种情况使用 mp-html <mp-html :content="html" /> 解析后效果图 ...

基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

10-16

本文将深入探讨如何使用vue和uni-app框架来构建一个类似抖音和陌陌的直播应用程序。uni-liveShow项目是一个综合性的微直播解决方案，它不仅包含了直播功能，还集成了小视频和即时通讯(IM)聊天等特性，能够在H5、小...

uni-app入门学习

热门推荐

qq_49002903的博客

10-24

6万+

你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的

uni-App引入iconfont

weixin_34150224的博客

11-01

1636

uni-app 是什么 uni-app 是一个借鉴 Vue.js、小程序、mpVue 开发跨平台应用的前端框架。通过编写一套代码，将其编译到iOS、Android、微信小程序等多个平台。目前可以打包成Android、IOS的App、小程序有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，关键这样容易浪费特别多时间，谨慎入坑，要不是公司非要用，我也懒得入坑网上的教程很少，就连简...

uni-app中引入font-awesome

好气嗷，但仍要保持微笑!

02-21

5512

1)安装依赖 npm install font-awesome --save 2）在main.js中引入，作为全局样式 import 'font-awesome/css/font-awesome.min.css'; 3）运行程序 npm run dev 这时，打开微信开发小程序，会出现404错误解决方法： build/webpack.base.conj.js文件中将limit注释之...

在uni-app中使用字体图标

尤朋的博客

05-29

1万+

首先去iconfont下载字体文件，就是下面这6个在main.js中引入样式在页面中直接通过样式类名使用大功告成

记一个小工具——font-spider(字蛛-css压缩中文字体字体）

喋喋的前端之路

11-10

4862

font-spider链接用处安装和用法链接先上一个官方链接吧字蛛再来一个Git地址字蛛Git地址用处这是一个压缩中文字体的小工具，用于前端开发过程中页面需要特定的文字，这些文字要是长期没有变化可以切图????。今天介绍的小工具就是用于有变化的文字，首先通过font-face的方法引入特定字体，通常一个字体文件过大(≥1M)，页面上使用的又不是很多，因项目需求使用自定义字体，发现页面加载很慢，所以使用font-spider压缩字体大小，提升页面加载速度。该工具的原理就是浏览整个页面文字，仅保

font-spider 字蛛的使用

weixin_45364050的博客

07-21

953

官网网址为http://font-spider.org/ 全局下载插件 npm install font-spider -g 查看版本 font-spider -V 创建一个文件夹 html文件 css文件 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=dev

uni-app 导航栏使用iconfont 字体图标（unicode引用方式）

weixin_44433499的博客

01-28

3157

unicode引用方式我们主要是用到iconfont.css和后缀名为.eot、.svg、.ttf、.woff的文件，新建一个专门存放文件夹。复制 &#xe73b 设置导航栏字体图标： "text": "\ue73f", "fontSrc":"/static/iconfont/iconfont.ttf" 效果图如下： ...