最近搜索


没有最近搜索

Help Center – Adding icons into your theme



image avatar

ModeratorWes

Most Engaged Member of All Time - 2021

已于 2013年9月26日 发布

Zendesk level: Beginner

Knowledge: HTML

Time Required: 10 minutes

Updated:  07/23/14 - Updated to latest Font Awesome CDN

Updated:  04/21/15 - Updated to latest Font Awesome CDN

Icons play a vital role in web design. Even though they can be quite small and might seem redundant, they play many different roles. Icons can be a great way to bring essential content to the point. They are a great attention grabber and they help your website visitors to find and scan content.

This tutorial will show you how you can easily embed icons into your Help Center.  You can add icons to your header, footer, home page, categories page, accordions, articles, buttons, etc..   

FontAwsome has a good selection of icons and its super easy to use, so I will use them in all of my examples below.

Let’s get started!

You don't have to download or install anything--just point to the Font Awsome css file like so.

  1. From the tools panel, select Customize Design.
  2. Select Edit Theme.
  3. Select Document Head and add the following:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet">

As shown here:(please note this image shows an older version-the correct version is above)

 

Now you are ready to start embedding the icons into your Help Center.  You can see how to type the code and some cool examples from here.

Examples

Below are some examples of how you can embed icons into your Help Center’s Design. 

If you want to show some of your examples please add a comment and attach an image of how you used icons in your theme.

Nav Icons & Code:

 

 

 

 

Nav Buttons & Code:

 

 

 

 

Article Icons:

 

Large icons on the Home Page:

 

One of my favorite Social Icons:

 


0

112

112 条评论

帖子评论已关闭。

找不到所需的内容?

新建帖子