之前,我们像大家介绍了Font Awesome 字体图标的由来和应用场景,也给大家提供了适用于追格小程序的 Font Awesome 字体组件。
关于Font Awesome 字体图标,更多信息可以访问这里:
https://www.zhuige.com/news/1010.html
接下来我们在追格小程序的实际应用中看如何用Font Awesome 字体图标美化自己的小程序。
如何在追格中引用Font Awesome 字体,可以按照这篇文章操作,把Font Awesome 字体组件配置好
https://www.zhuige.com/news/1009.html
以追格小程序的发布页为例,打开文件
/pages/bbs/post/post.vue
首先对页面结构调整,找到代码
<view class="zhuige-post-line">
<view>选择圈子:</view>
增加Font Awesome图标结构,修改为
<view class="zhuige-post-line">
<view>
<text class="fa fa-users" aria-hidden="true"></text>
<text>圈子:</text>
</view>
参考这个修改,将这两部分也修改为Font Awesome图标
<view>你的位置:</view>
改为
<view>
<text class="fa fa-map" aria-hidden="true"></text>
<text>位置:</text>
</view>
<view>动态话题:</view>
改为
<view>
<text class="fa fa-hashtag" aria-hidden="true"></text>
<text>话题:</text>
</view>
然后增加css
.zhuige-post-line>view:nth-child(1) text:nth-child(1) {
margin-right: 12rpx;
}
我们就可以得到如下效果
这里的,fa-hashtag,fa-map,fa-users是我们选择应用的Font Awesome图标,可以结合你自己的小程序风格和喜好进行修改
在Font Awesome中文网,你可以选择更多图标样式。
-
追格企业官网小程序优化意见反馈追格企业官网小程序优化意见反馈
-
追格小程序用户隐私保护设置教程追格小程序是一个积木式小程序搭建框架,基于Uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
如何利用css的延迟属性结合简单js实现渐变动效通过简单的Scss+TypeScript。我们可以实现视频中常见的渐变动效,这里是通过原生css+JS来实现的
-
如何利用css和简单JavaScript实现文字渐隐动态效果通过css的animation动画及js循环控制实现
-
追格小程序V1.8.5更新发布@好友模块与隐私协议接口追格小程序是一个积木式小程序搭建框架,基于Uniapp+WordPress开发的微信小程序,代码免费开源不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
追格小程序全部产品都已添加隐私弹框为什么不在微信小程序SDK中弹出隐私弹框
暂无评论,抢个沙发...