FontAwesome Icons for Next and Previous Topic Buttons
-
BBTechWriter
- Jr. Propeller Head
- Posts: 4
- Joined: Tue Jun 25, 2019 8:00 am
FontAwesome Icons for Next and Previous Topic Buttons
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!
Re: FontAwesome Icons for Next and Previous Topic Buttons
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&body=<' + escape(window.location.href) + '>';" 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>-
BBTechWriter
- Jr. Propeller Head
- Posts: 4
- Joined: Tue Jun 25, 2019 8:00 am
Re: FontAwesome Icons for Next and Previous Topic Buttons
Cool, I'll give this a shot, Andrewb!
Re: FontAwesome Icons for Next and Previous Topic Buttons
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 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";
}