如何在追格小程序中用Font Awesome 字体图标美化自己的小程序

11月/25日/小程序/浏览 128

之前,我们像大家介绍了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中文网,你可以选择更多图标样式。

发表评论

暂无评论,抢个沙发...

客服 工单