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

1，本节目标

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

2，设置默认的编辑器

在前面的章节，我们已经介绍过了 自定义HTML模块的bug，了解到默认的编辑器会过滤掉一些空白的标签，因此，在本节，我们首先需要做的就是更换默认的编辑为codemirror.

前往系统 ->全局设置 前台编辑器设置中更换编辑为codemirror或者none均可。如图：

这样我们就完成了默认编辑器的设置了。

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

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

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

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

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

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

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

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

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

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

4.3 将模块发布到feature-row 这个位置，然后在前台查看效果。

5，其他说明

由于这种codemirrow编辑器是直接显示源码的，不利于编辑文章，所有，在编辑完模块后，建议你将其修改会TinyMCE编辑器。