uniapp字体图标的使用

前言:今天和大家分享一个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. 第四步** **,一样使用



 

5. 第五步** **,显示不出图片,重启下项目就好了

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

四.百分比布局

1.原理

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

2.优点

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