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

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