帮助中心-添加图标到您的主题
亚博Zendesk级别:初学者
知识:HTML
时间要求:10分钟
更新:14年7月23日-更新到最新的字体Awesome CDN
更新:04/21/15 -更新到最新的字体Awesome CDN
图标在网页设计中起着至关重要的作用。尽管它们可能非常小并且看起来多余，但它们扮演着许多不同的角色。图标可以很好地把重要的内容呈现出来。他们是一个伟大的注意力吸引者，他们帮助你的网站访问者找到和扫描内容。
本教程将向您展示如何轻松地将图标嵌入帮助中心。你可以添加图标到你的页眉，页脚，主页，分类页面，手风琴，文章，按钮等。
FontAwsome有很好的图标选择，它非常容易使用，所以我将在下面的所有例子中使用它们。
我们开始吧!
你不需要下载或安装任何东西——只需要像这样指向Font Awsome css文件。
- 从工具面板中选择自定义设计．李< / ><李>选择编辑主题。
- 选择文件头并加上以下内容:李< / >
如下图所示:(请注意，此图显示的是旧版本，正确的版本在上面)
现在可以开始将这些图标嵌入到帮助中心了。您可以看到如何输入代码和一些很酷的示例在这里．
例子
下面是一些如何在帮助中心设计中嵌入图标的例子。
如果你想展示你的一些例子，请添加一个评论，并附上你如何在你的主题中使用图标的图像。
导航图标和代码:
导航按钮和代码:
文章图标:
首页上的大图标:
我最喜欢的社交图标之一:
-
嗨,韦斯,
一如既往的好文章。在这方面我是一个超级初学者，但学习速度很快。只需要一些提示，在哪里实际放置个人图标代码。我使用谦虚的鱿鱼主题，我试图把不同的图标以上的类别标题。任何帮助都将非常感激。
干杯
安德鲁
-
@Andrew -你想做一些类似于我的主页上的大图标的例子。
-
谢谢韦斯,
是的，就像那个例子。
-
@Andrew -我们的帮助中心是建立在Bootstrap框架上的，它使所有的东西都能响应，因为我不需要写很多代码，因为它已经内置在Bootstrap中。然而，我们也可以通过添加一些额外的CSS来实现相同的外观。既然我假定您不会像我那样使用Bootstrap框架，那么让我写出您需要的CSS。明天我会尽量贴一些东西给你看，这样你就可以让我知道我是否在朝着正确的方向前进。
如果你想阅读Bootstrap，你可以这样做:http://getbootstrap.com/
如果你感兴趣的话，你可以看到我的Bootstrap 2列代码，关于我是如何从这里做盒子的(这实际上是我的整个主页，尽管它现在改变了一点):http://bootply.com/82678
-
太谢谢你了，韦斯。
我一定会看看Bootstrap未来的变化，我的帮助中心。
再次感谢。
-
安德鲁，今晚还有一个问题。您希望您的图标在文本的上方或左侧。见附件的左边和我的例子，他们在上面。只是想确保我给你的代码是正确的。
-
上面的文字是最好的。
-
看看这个测试站点。我从你的网站上找了一些分类。这是你想要的样子吗。我修改了一行CSS，使其正确对齐，其余的是HTML。只要告诉我，我会把前三个块的代码贴在这里，然后你可以复制粘贴到你剩下的部分。
-
字体真棒更新到4.0版。我已经编辑了需要复制到文档头部的代码。
@Andrew -确保你更新了你的文档标题，因为我发送的代码将包括新的4.0版本图标。
-
谢谢韦斯!这启发了我在Section页面的“查看所有文章”链接上添加一个图标。
-
@Selena -太棒了，看起来很棒，感谢分享你的截图。我也要去做同样的事情:-)
-
@Andrew -你都准备好了。在主页上删除{{category_list}}，复制并粘贴下面的代码。我将前三个类别链接到您的网站，因此您需要做的就是添加其余的。
< ul类= "类别列表" >
<李>
< br />通用帮助与信息
李< / ><李>
忘记用户名/密码
李< / ><李>
< br />注册/续订帮助
李< / >…复制上面的
- 标签，粘贴到你的下一个类别
< / ul >现在我们要做的就是把所有的东西都凸起，让它看起来居中。打开你的CSS
- 找到以下行(在第#591行周围):李< / ><李>改变margin-top: whatever为40px李< / >< / ul >
如果你在路上卡住了，告诉我，但这个应该可以。我还建议你在你的网站上增加一个框，使它总共6个块，而不是6个。所有东西都会这样排列。古德勒克。
- 标签，粘贴到你的下一个类别
-
谢谢韦斯,
我会让你知道我进展如何。
安德鲁
-
嗨,韦斯,
因为我使用的是不起眼的鱿鱼主题，所以主页上没有{{category_list}}。这个主题使用{{category_tree}}组件。我确实在高贵的盛宴模板中测试了代码，它看起来很棒，但我仍然更喜欢卑微的鱿鱼主题的布局。
谢谢
安德鲁
-
@Andrew -我写的代码是为Humble Squid主题。我刚切换到Humble Squid，我看到{{category_list}}，所以不确定为什么你看到{{category_tree}}。我花了很多在你的页面，你需要复制我的代码对你的{{推广文章}}。一旦你这样做，你会看到它会添加一行3框的图标，就像你想要的。如果您看到{{category_tree}}，那么删除它并粘贴我的代码。您需要在Zendesk的主题编辑器中完成此操作。亚博
-
@Andrew -我只是按照自己的指示制作了Humble Squid主题。一旦完成，它应该是这样的:
-
开始了一个新的卑微的鱿鱼模板，一切都很好。谢谢你一直以来的帮助，韦斯。继续保持令人印象深刻的工作!
谢谢
安德鲁
-
嗨，我有麻烦得到字体awesome图标显示在我的文章。
我在HC的文档标题部分添加了指向字体awesome css的链接，当我查看源代码时，我看到了这一点。
然后，在编辑一篇文章，我进入HTML/源代码，并尝试添加:
但它不起作用，当我回到HTML时，我的< I >标签不见了。
关于如何使这项工作的任何提示将不胜感激。
谢谢,
大卫 -
顺便说一句，如果我在Chrome中直接使用开发工具编辑那篇文章，图标会正确显示，如果我直接在HC代码中添加一个图标(编辑主题)，它也会显示出来，所以这感觉像是文章HTML编辑器的问题。希望有办法解决这个问题。
再次感谢,
大卫 -
@David -我刚刚做了一个快速测试，看到了同样的问题。我相信你是对的，这将与文章领域有关。我在Zendesk的图标上有一张票，因为他们的图亚博标没有显示在我的任何主题中，所以这可能是相关的。我将测试一些更多，如果我找到一个变通办法，我一定会让你知道。
-
韦斯，谢谢你的快速回复。我现在使用一个图像作为一个工作，但希望得到字体awesome的工作。我试着找到一个工作，但没有成功——在我看来，HTML编辑器正在摆脱空标签，当我想把任何东西放在< I >标签旁边时，它把标签改成了标签。
-
你好，韦斯-你一定很忙，因为你似乎在这个论坛上回答了很多问题。我是Zendesk的新手，还在摸索亚博(因为我是这类东西的初学者，所以速度很慢)。我试图遵循你的图标变化上面，但我似乎可以按照逻辑来改变图标，并在瓷砖上添加进一步的按钮后，第一个3。我的网站是activeutilities.zendes亚博k.com -我的问题如下:
如何按照附件更新图标
我如何改变瓷砖背景颜色-想要匹配我们公司的橙色
我如何添加背景图像，类似于support.mapmyfitness.com -附带的示例图像
我很感激你能给我的任何帮助
本
-
嗨，Ben，欢迎加入Zendesk大家庭。亚博我的一些代码已经被一些帮助中心使用了。正如你所想象的，我们有很多不同的方法来实现这一点。在我上面的例子中，我使用了字体Awesome，但我们也可以使用图像。如果你想对你的帮助中心做一些自定义，我很乐意尝试并帮助你，但有时很难做到没有访问你的帮助中心。MapMyFitness使用硬编码到其主页中的图像。过程(http://support.runkeeper.com/hc/en-us)使用字体Awesome像我的例子，是硬编码，但我们也可以使用JQuery来实现这一点。
让我们逐一回答这个问题，同时看看下面我的自定义主题。让我看看我是否以及如何在没有访问权限的情况下做到这一点，除非你想让我只访问你的帮助中心。我不提供这个很多，但我会建立你一个自定义主题，如果你能给我临时访问你的帮助中心模块。
我的自定义主题是免费下载的，或者只是看看我使用的一些代码。https://support.亚博zendesk.com/entries/41702416
-
嗨,韦斯,
很高兴让您临时访问我们的帮助中心-什么是PM您的最佳方式?
-
@Ben - Super你可以给我的gmail账户wes(at)cibertec.net发邮件，你也可以用我列出的相同的电子邮件通过skype联系。
-
嗨,韦斯,
我使用的是Humble Squid主题，并成功地在评论中使用了示例代码，将图标添加到单个类别框中，这是有效的。然而，当我试图在单个列表项中添加子列表(希望创建一个下拉列表)时，每个框中只显示第一个项。您能提供“主页上的大图标:”示例的示例代码吗?谢谢。
-
嗨，菲利普-你是想创建一个下拉框，还是你想在这个框内显示多个链接。
-
嗨，Wes，我想让每个框在底部附近包含一个小按钮，这样当用户点击它时，它会显示一个下拉菜单，其中包含到该类别下面部分的链接或我希望更突出的特定文章。
-
@Phillip -谢谢你的截图，这真的很有帮助。让我看看我能想出什么办法。给我几天时间，我很忙。
-
嗨，韦斯，非常感谢你的帮助。我很熟悉自己忙碌的状态。
文章已停止评论。
112条评论