FAQs on FAQs: BYOT - Bring Your Own Theme (part 2)

• facebook

Welcome back to FAQs on FAQs, a series designed to help you get the most out of your LibraryH3lp-powered FAQ. Last time, we revealed literally hundreds of possibilities for your FAQ site's theme and also covered some of the under-the-hood goodies like icons that automatically change color based on your theme. In this installment, we'll show you how to plug in a third-party Bootstrap theme and how to harness the power of FontAwesome icons.

Plugging in a 3rd party Bootstrap theme is easily accomplished with a bit of template editing. You'll need to edit your base.html template and look for this line within the head element:


You'll replace that line with two lines that look like this:

<link rel="stylesheet" href="/css/faq.css"/>
<link rel="stylesheet" href="http://your.server.edu/theme.css"/>

The second stylesheet's href attribute will of course need to be set to reference your custom Bootstrap theme. Easy peasy, right?

One minor complication that you might run into surrounds Bootstrap icons Vs. FontAwesome icons. Chances are that any third-party Bootstrap theme you elect to use will automatically include Bootstrap icons. If there is an easy way to exclude those Bootstrap icons from your theme, then we recommend you do so in preference to FontAwesome. If that isn't possible, no worries, but you'll want to remove these lines in the head element of the base.html template:

<link rel="stylesheet" href="/css/font-awesome.min.css"/>
<!--[if IE 7]>
  <link rel="stylesheet" href="/css/font-awesome-ie7.min.css"/>
<![endif]-->


Using FontAwesome icons. FontAwesome makes it super simple to embed tons of icons within your FAQ site. You can place icons anywhere you'd like by creating an i element with a class name which is the same as the icon's name.

E.g. <i class="icon-comments-alt"></i>


In fact, you can do all sorts of things with these icons by adding classes to any i element...

1. Control size with icon-large, icon-2x, icon-3x, or icon-4x
2. Add borders with icon-border
3. Replace list bullets.  Looks like this...
   <ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
</ul>
4. Animate with icon-spin.¹

In the next installment of FAQs on FAQs, we'll show you how make the header for your FAQ site match your library's existing website. Want to get your own LibraryH3lp-powered FAQ site up and running? Need to import existing content into your FAQ? E-mail us.