54
Replies
NickShears​ I am now using the new version of RH 2019 (not classic) and I used font-awesome icons in my skin I just finished making. It was an interesting process, and not near as easy as I thought it would be, because the skins are essentially re-purposed responsive skins from prior versions of robohelp, but it did work better! I used svg source files from wikimedia commons for font awesome, downloaded them and added them to appropriate folders and things essentially worked. I ran into a few road blocks, and a few icons didn't scale the way they should have, but I used inkscape to just change the canvas size down to where I needed it in those situations (maybe 4 icons). I reported some interesting bugs based on my skin creating adventure, too! lol In the end, I have a really nice looking skin based on the charcoal gray skin included with robohelp. 
Hi,
it works exactly like it is described on the FontAwesome website (here).
Just include the link to FontAwesome in the <head> section of your topic:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
Note: As RoboHelp 2019 is strictly XML compliant HTML5, make sure to "close" the tag with "/>" at the end not just ">".
In your CSS you can then define the icons for your styles.
Example: I have created a nice "Important" note box and auto-generate the icon with FontAwesome icon F071:
div.important {
background-color: #fff3d4;
border: 1px solid #fff3d4;
border-left-color: #f6b73c;
border-left-style: solid;
border-left-width: 5px;
display: block;
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
min-height: 60px;
padding-bottom: 5px;
padding-left: 60px;
padding-right: 10px;
padding-top: 30px;
}
div.important:before {
color: RGB(50, 50, 50);
/*content: "\f071"; - FontAwesome triangle with exclamation mark */
content: "\f071";
font-family: "Font Awesome 5 Free";
font-size: 20pt;
font-weight: 900;
margin-left: -50px;
margin-top: -20px;
position: absolute;
text-decoration: inherit;
z-index: 1;
}
Looks like this:
And the code in the topic itself is very simple and straightforward:
<div class="note important">
<p>This is a <code class="xmlelement">div</code> with <code class="xmlatt">class</code> set to <code class="codeph">important</code>.</p>
<p>This note is important.</p>
</div>
Hope that helps.
P.S.: The search engine for icons on FontAwesome.com works pretty well. Once you have found the icon you need, you can simply copy the HTML code for the icon.
In RoboHelp, if you want to insert a FontAwesome icon somewhere in the text, just switch to the source code view and insert the FontAwesome code where you want the icon to appear, here: <i class="fas fa-exclamation-triangle"></i>
It would appear, to my surprise, that Font Awesome works with local outputs. I had created a project to explain how to use Font Awesome, SVG images and Google Fonts that referenced Font Awesome's online CSS. When I took my PC offline, the Font Awesome icon disappeared from the RoboHelp editor and that seemed logical and inline with the issue that concerned you. The surprise was that if I generated the output still offline, the icon was still there in the generated output.
You can see the output on my site and you can download just the project or just the output so that you can try locally offline.
@Surbhi - Working with the offline method is something I only tried today. Could you please explain the anomaly where the icon is blank in the project when offline but still works in an output that is local and offline?
View the Font Awesome project online.
See www.grainge.org for free RoboHelp and Authoring information.
I have updated the demo and the downloads to make it clearer how to work with Font Awesome offline.
@shootathought Have you tried the offline method?
See www.grainge.org for free RoboHelp and Authoring information.
AdChoices