在这一节我们将实现科技改变生活这个模块，并且向大家介绍如何在网页中使用字体图标

1，本节目标

---

使用自定义HTML模块来实现科技改变生活这个模块

2，如何在网页中显示字体图标

---

在做网页的时候，为了美观我们通常会在网页中显示一些图标。如目标网站的科技改变生活这个模块。

 

上面的四个图，就是使用字体图标来做的。做过网页的朋友都知道，图标是使用字体来做出来的，现在已经有很多的开源字体图标库了，并且joomla也自带了一个字体图标库，我们要做的就是在需要的地方引用这个图标。

简单的来说，要在前台显示字体图标，需要做两步：

• 在网页中引入字体
• 在HTML中使用一些特定的类（一般以icon-开头）来应用需要的图表。

引用图标的办法 一般使用 <i class="icon icon-home"></i> <span class="icon icon-home"></span> 之类的标签。每一种图标库都有自己的类名，具体要查询相应的字体库的说明。

对于我们使用者来说，一般模板会为我们加载一个字体图标库，如bootstarp图标库，fa图标库等等。其实真正要做的就是使用<i class="图标类名"></i>来引用就是了。

ZFree模板全面支持bootstrap栅格系统和引入Font Awesome字体图标。关于Font Awesome字体图标的更多说明，可以参考链接 http://www.fontawesome.com.cn/icons/font/

 3，创建并且发布 科技改变生活模块

---

4.1 前往模块管理中，点击新建模块，将模块的类型选择为自定义模块。

4.2 在模块的编辑界面，输入需要显示的自定义HTML代码。如图：

4.3 将模块发布到feature 这个位置，并且将模块分配到首页。如图：

另外，还需要再显示参数选项卡中设置一下标题和标题描述，将包裹内容设置为是。如图：

4.4 做完了这些，我们刷新前台，看到的效果如下:

从上面可以看到，虽然内容展示出来了，但显示效果并不好。我们还需要做进一步的设置。

5，模块css类后缀

---

Joomla为了方便开发者调整模块的样式，提供了模块css类设置参数，在模块的输出上包裹一个css类，开发者可以预先定义一些样式，在使用模块的时候再输入类名称即可。ZFree模板，默认为科技改变生活包裹了一个tech的css类名。因此，我们需要在模块css类后缀这个参数上加上。如图：

 保存在此查看效果如图：