学习笔记（1):uni-app实战社区交友类app开发-引入自定义图标库

立即学习:https://edu.csdn.net/course/play/28009/381721?utm_source=blogtoedu

1. 在iconfont.cn图标库中打包下载图标文件压缩包

2. 解压压缩包，在hbuilder里面打开iconfont.css文件

3. 在common目录下创建icon.css

4. 将iconfont.css的内容粘贴到icon.css中

5. 删除

并在下一行url前补上src:

6. 删除

7. 在App.vue中引入文件

8. 在page文件夹里面打开index.vue，删除多余的内容，剩下内容如下

注意，在<template></template>节点中只能出现一个<view></view>节点。

9. 增加text组件

10. 回到解压的文件夹，双击打开demo_index.html,得到以下页面

11. 复制想要的图标下面的代号

12. 修改<text</text>成以下样式。

13. 完成（view组件相当于div）

学习笔记（1):uni-app实战社区交友类app开发-引入自定义图标库相关推荐

学习笔记（2):uni-app实战社区交友类app开发-引入css动画库
立即学习:https://edu.csdn.net/course/play/28009/381722?utm_source=blogtoedu 1. 百度搜索并打开 animate.css . ...
网易云课堂uni-app实战社区交友类app开发笔记
文章目录前言代码展示前言提示:可以在这里引入话题,记得删除示例哦. 例如:我们在进行项目开发的时候可能会遇到一些获取屏幕宽度,dp px的相互转换等问题,我们当然不能每用一次就复制粘贴一次.这 ...
Uni-app 实战社区交友类app开发
环境搭建和创建项目开发环境搭建工具的使用创建uniapp项目开发环境搭建工具的使用 dhttps://www.dcloud.io/hbuilderx.html ,输入网址下载. 插件安装 : ...
uni-app实战社区交友
前言本文是针对<uni-app实战社区交友>系列视频教程的笔记和补充说明, 帮助编程新手快速找到捷径 2021.2.16更新提示:着重说明比较难的部分,比较简单的教程不详述免费资源在 ...
amazeui学习笔记一（开始使用4）--Web App 相关
amazeui学习笔记一(开始使用4)--Web App 相关一.总结 1.桌面图标(Touch icon)解决方案:终极方案:link标签的rel和href属性: <link rel=&qu ...
【一文弄懂】张正友标定法-完整学习笔记-从原理到实战
张正友标定法-完整学习笔记-从原理到实战文章目录张正友标定法-完整学习笔记-从原理到实战 (零)前言: 1 为什么需要标定? 2 相机标定的已知条件和待求解是什么? 标定前的已知条件: 待求信息: ...
uni-app开发社区交友类项目
本项目使用uni-app开发社区交友类项目源码
Polyworks脚本开发学习笔记(十六)-用C#进行Polyworks二次开发
Polyworks脚本开发学习笔记(十六)-用C#进行Polyworks二次开发 Polyworks支持C#二次开发,用对应的SDK文档试着做一下开发样例. 新建一个C#项目,在解决方案中右键添加引用 ...
BOLT.NET 学习笔记（一）开篇用.net winform 快速开发炫酷的界面
BOLT.NET 学习笔记(一) 开篇用.net winform 快速开发炫酷的界面 bolt 基本介绍 Bolt界面引擎是迅雷公司从2009年开始开发的第四代界面库.迅雷7是首个采用该引擎成功开 ...

学习笔记（1):uni-app实战社区交友类app开发-引入自定义图标库

学习笔记（1):uni-app实战社区交友类app开发-引入自定义图标库相关推荐

最新文章

热门文章