进入专题模式查看 >>

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

1,本节目标


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

2,设置默认的编辑器


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

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

Joomla更换编辑器.png

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

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


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

 

Joomla自定义HTML模块的前台效果.png

上面的四个图,就是使用字体图标来做的。做过网页的朋友都知道,图标是使用字体来做出来的,现在已经有很多的开源字体图标库了,并且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代码。如图:

JoomlaCodeMirror编辑器.png

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

5,其他说明


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

 

评论 (1)

  • 您好,可以分享一下这个图标吗? :p在HTML中使用一些特定的类

    0 喜欢