FontAwesome Icons for Next and Previous Topic Buttons

This forum is for all Flare issues related to styles, stylesheets and XML.

FontAwesome Icons for Next and Previous Topic Buttons

Postby BBTechWriter on Tue Jun 25, 2019 8:17 am

How do I use the FontAwesome code to change the topictoolbar Next Topic and Previous Topic buttons to a FontAwesome icon? I use FontAwesome icons throughout my project, but I'm having trouble figuring out how to change the default button images in the skin editor to FontAwesome icons. Thanks!
BBTechWriter
Jr. Propeller Head
 
Posts: 2
Joined: Tue Jun 25, 2019 8:00 am

Re: FontAwesome Icons for Next and Previous Topic Buttons

Postby andrewb on Tue Jun 25, 2019 2:54 pm

I created my own toolbar that I added to a snippet. This snippet is then added to my master page. I'm sure it is possible to use a topic toolbar skin and CSS to do the same, but this seemed like a lot less hassle. Here is the code for the snippet:

Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <body>
        <div class="topic-toolbar" style="margin-bottom: -0.5rem !important;">
            <div>
         <i class="la la-border la-envelope nav needs-pie feedback-button" onclick="window.location='mailto:xxx@xxx.com?subject=Help topic feedback&amp;body=&lt;' + escape(window.location.href) + '&gt;';" title="Feedback">
         </i>
         <i class="la la-border la-plus nav needs-pie expand-all-button" data-state1-class="la la-plus nav needs-pie expand-all-button" data-state2-class="la la-minus nav needs-pie collapse-all-button" data-state2-title="Collapse all" title="Expand all" data-state1-title="Expand all">
         </i>
         <i class="la la-border la-pencil nav needs-pie remove-highlight-button" title="Remove highlights">
         </i>
         <i class="la la-border la-angle-left nav needs-pie previous-topic-button" title="Previous topic">
         </i>
         <i class="la la-border la-angle-right nav needs-pie next-topic-button" title="Next topic">
         </i>
            </div>
        </div>
    </body>
</html>
andrewb
Jr. Propeller Head
 
Posts: 3
Joined: Sun Aug 16, 2015 3:40 pm
Location: Brisbane, Australia

Re: FontAwesome Icons for Next and Previous Topic Buttons

Postby BBTechWriter on Wed Jun 26, 2019 7:55 am

Cool, I'll give this a shot, Andrewb!
BBTechWriter
Jr. Propeller Head
 
Posts: 2
Joined: Tue Jun 25, 2019 8:00 am

Re: FontAwesome Icons for Next and Previous Topic Buttons

Postby andrewb on Wed Jul 10, 2019 10:24 pm

I actually got this working without having to resort to the snippet. I had to make the change because I wanted to move the links to my FontAwesome and LineAwesome stylesheets to my master page so the styles didn't clog up my Styles Pane (as per https://forums.madcapsoftware.com/viewtopic.php?f=6&t=30703). When I removed the links to the FA and LA stylesheets from my main stylesheet, my snippet no longer worked. It did take some tweaking... but it works. For any of the buttons you use, you need to set the Image to 'none' in the toolbar skin. These are the styles I've added to my stylesheet:

Code: Select all
._Skins_TopicToolBar.mc-component .button
{
   color: #00abea;
   font: normal normal normal 16px/1 "LineAwesome";
   font-size: 1.8rem;
   margin-left: .25rem;
   padding: .4rem;
}
._Skins_TopicToolBar.mc-component .button:hover
{
   background: #f5f5f5;
}
.feedback-button:before
{
   content: "\f1c6";
}
.expand-all-button:before
{
   content: "\f2c2";
}
.collapse-all-button:before
{
   content: "\f28e";
}
.remove-highlight-button:before
{
   content: "\f2b0";
}
.previous-topic-button:before
{
   content: "\f111";
}
.next-topic-button:before
{
   content: "\f112";
}
andrewb
Jr. Propeller Head
 
Posts: 3
Joined: Sun Aug 16, 2015 3:40 pm
Location: Brisbane, Australia


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 1 guest