Help Center

Powered by Minitek FAQ Book
Loading...

Tip for also adding a Fontawesome icon to the Topic description, so the Topic list and Topic descriptions look the same

N
Net-ConfigPosted 11 months ago

Just want to share a quick tip that may be useful to add to the documentation for FAQBook.

 

I wanted to add the same FA icon to the Topic description as what I included under "Icon class" in the Options tab.

There is no option currently for showing the icon at the Topic level, either with the title or with the description.

The icon shows at the Section level only, it seems.

 

I want there to be a visual continuity between the Section and Topic levels though.

 

 

So I found that you can add this bolded code, using the Code mode of the editor, to the Topic description text:

<p><i class="fas fa-question-circle fa-lg"></i>FAQ information and site tips</p>

 

With this code, when the user navigates from the Section level to a specific Topic, the icon shows up again, but with the description text instead of the topic title.

 

Note for when you are in the description editor: it will not show the icon when you switch to the Editor or Preview tab in my editor, which is JCE Core.

It will however work as expected on the site and I think this is not related to my template, but due to FAQBook loading the Fontawesome script, if active in Global Options.

 

I then added some simple custom CSS in my template (Yootheme Pro - Settings - Custom Code - CSS) to define the color and make some space between the icon and the text:

.fa-lg {
    color: #1e6eaf;
    margin-right: 10px;
}

 

And presto, now the Topic titles look comparable between the two levels.

Just wanted to share.

 

 

Loading...
0
#3939

1 answer

M
MinitekPosted 11 months agoModerator

Thanks. This is helpful info.