uniapp字体图标的使用

如果决定要走又何必挽留

已于 2022-03-02 10:03:27 修改

阅读量5.6k

点赞数 4

分类专栏： uni-app 文章标签： sass 前端 vue.js uni-app

于 2022-02-28 16:44:49 首次发布

本文链接：https://blog.csdn.net/qq_59076775/article/details/123185144

版权

uni-app 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

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

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

如果决定要走又何必挽留

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
uniapp字体图标的使用

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

扫一扫