前言:今天和大家分享一个uniapp字体图标的使用方法，对于一个刚步入uniapp的小白来说,请多指教。

一.先从字体图标库下载对应的字体图标

下载完成之后得到一个文件夹,保留以css结尾和ttf结尾的两项

二.利用HBuilder创建一个项目

1.用模板创建好项目

2.在根路径下创建common，并放入.css和.tff的文件

3.删除一些无关的文件

1.common.vue

2.一些路径的配置在pages.json里面会自动生成

4.在iconfont.css引入iconfont.ttf

5.在app.vue配置成全局

6.使用

7.效果

三.总结

1.第一步,一样下载,把iconfont.css和iconfont.ttf拉取到common文件夹2.第二部,把iconfont.css中的红色的替换替换如下:@font-face {font-family: "iconfont";/**这个就是放入到common的下ttf文件**/src: url('~@/common/iconfont.ttf');}3. 第三步** **,在App.vue中引入iconfont.css@import url('./common/iconfont.css');4. 第四步** **,一样使用<view class='iconfont icon-kefu'></view>5. 第五步** **,显示不出图片,重启下项目就好了

作者：新人前端小杨报道
链接：https://juejin.cn/post/7021481124421435422
来源：稀土掘金

四.百分比布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="header"><img src="../006TTRFjly1gxs8x6g4y4j30u0140grp.jpg" alt=""><img src="../NS3.jpg" alt=""><img src="../NS6.jpg" alt=""></div><style>.header {width: 600px;height: 300px;margin: 100px auto;background-color: pink;display: flex;}img {width: 33.33%;height: 100%;}</style></body></html>

1.原理

使用百分比的方式设置宽度或者高度，当父元素发生变化的时候，子盒子也会发生变化。

2.优点

可以自适应进行变化，不需要设置固定数值。

uniapp字体图标的使用相关推荐

uniapp字体图标的使用步骤详细版【前端开发】
最后,点击 Download 按钮,下载字体图标文件到本地. 2️⃣字体图标文件放在合适的位置上一步Download后,会下载这样一个压缩包: 解压后,找到 style.css 并在子文件夹 fon ...
【uniapp引入阿里字体图标】
uniapp引入阿里字体图标引入阿里字体图标引入阿里字体图标链接奉上 uni-app字体图标阿里图标官网 nvue中不可直接使用 css 的方式引入字体文件,需要使用以下方式在 js 内引入. ...
在 uni-app 中使用字体图标
在 uni-app 中使用字体图标下载iconfont字体图标进入 iconfont 官网本地下载图标文件压缩包解压出来在uni-app 项目static 下新建 fonts 文件夹 ...
uni-app小程序阿里巴巴字体图标兼容ios
问题描述提示:uni-app 小程序阿里巴巴字体图标库不兼容 <icon class="iconfont icon-xuanze"></icon> 解决 ...
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
微信小程序.uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用安装iconfont-tools npm i -g iconfont-tools 全局安装工具下 ...
Uni-app 中使用 .ttf 字体图标
1.相关文件存放位置 Uni-app 中的 .ttf 字体文件存放位置:/src/static/uni.ttf. 引入字体文件 uni.ttf 的 CSS 文件存放位置:/src/common/uni ...
uni-app之阿里字体图标转base64方法
uni-app之阿里字体图标转base64方法 uni-app开发过程中发现小程序端不能直接使用字体图标,需先转成base65方可使用,转换方式如下. 一.转换步骤 1.1 从iconfont下载字体 ...
uniapp小程序中使用base64格式的字体图标iconfont的详细步骤
下图是uniapp官网中对uniapp中字体图标使用规范的描述这是官网地址中的原文链接 uniapp官网原文从官网中对uniapp中字体图标使用规范的描述里可以看出,uniapp中使用字体图标的方 ...
uniapp使用字体图标
1.在阿里图标库下载需要的字体图标,选择好图标后点下载代码 iconfont-阿里巴巴矢量图标库 2.将下载的压缩包里面的ttf文件拷贝到uniapp项目的static文件夹 3.如果是要用到app的 ...
uniapp项目添加阿里图标库字体图标（图标在手机、浏览器均可查看）
前言提示:本篇文章正文内容分为: 给uniapp项目导航栏添加字体图标: 在uniapp项目中使用字体图标. 一.给uniapp项目导航栏添加字体图标 1:登录阿里巴巴矢量图标库:https://w ...

uniapp字体图标的使用

前言:今天和大家分享一个uniapp字体图标的使用方法，对于一个刚步入uniapp的小白来说,请多指教。

一.先从字体图标库下载对应的字体图标

二.利用HBuilder创建一个项目

1.用模板创建好项目

2.在根路径下创建common，并放入.css和.tff的文件

3.删除一些无关的文件

4.在iconfont.css引入iconfont.ttf

5.在app.vue配置成全局

6.使用

7.效果

三.总结

作者：新人前端小杨报道
链接：https://juejin.cn/post/7021481124421435422
来源：稀土掘金

四.百分比布局

uniapp字体图标的使用相关推荐

最新文章

热门文章

uniapp字体图标的使用

前言:今天和大家分享一个uniapp字体图标的使用方法，对于一个刚步入uniapp的小白来说,请多指教。

一.先从字体图标库下载对应的字体图标

二.利用HBuilder创建一个项目

1.用模板创建好项目

2.在根路径下创建common，并放入.css和.tff的文件

3.删除一些无关的文件

4.在iconfont.css引入iconfont.ttf

5.在app.vue配置成全局

6.使用

7.效果

三.总结

作者：新人前端小杨报道 链接：https://juejin.cn/post/7021481124421435422 来源：稀土掘金

四.百分比布局

uniapp字体图标的使用相关推荐

最新文章

热门文章

作者：新人前端小杨报道
链接：https://juejin.cn/post/7021481124421435422
来源：稀土掘金