uniapp字体图标的使用

前言:今天和大家分享一个uniapp字体图标的使用方法，对于一个刚步入uniapp的小白来说,请多指教。一.先从字体图标库下载对应的字体图标下载完成之后得到一个文件夹,保留以css结尾和ttf结尾的两项二.利用HBuilder创建一个项目1.用模板创建好项目2.在根路径下创建common，并放入.css和.tff的文件3.删除一些无关的文件1.common.vue2.一些路径的配置在pages.j

曾许人间第仪流

5787人浏览 · 2022-02-28 16:44:49

曾许人间第仪流 · 2022-02-28 16:44:49 发布

前言:今天和大家分享一个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.优点

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

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^