I recently installed the Font Awesome icons (i.e. symbol font) in Microsoft Word so that when using the Insert > Symbol option, I can change the Font dropdown (on the Symbols tab) to FontAwesome to see and select the icon I want to insert into the Word document. I'm looking for a way in RoboHelp 2015 to also be able to do this. When choosing Insert > Symbol, I'd like to be able to see the list of FontAwesome icons so I can select one to put into my Topic. But I'm not seeing a way to do this. I know I can do screen captures of each of the FontAwesome icons, either via MS Word or even one of the many websites that display Font Awesome icons, and then paste that screen capture into RoboHelp, but I'd rather be able to select the symbol from a list when I need one. Anyone have any thoughts or ideas on how to get the Font Awesome icons into RoboHelp? I'm just not seeing a way to do this. Thank you.
Ages ago I tried but failed to make Font Awesome work in RoboHelp. Glad to see from this old thread that I was far from alone.
But I see the Adobe blog, RoboHelp 2019 release – Adobe TechComm Blog, quotes this RoboHelp 2019 feature:
"Easily add web fonts such as FontAwesome or Adobe Typekit fonts, to name a few"
That adds to my reasons to upgrade. Not only do we use those icons throughout the app I document, but I could add standard help-related icons to the webhelp itself.
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.
Thanks, shootathought; interesting. But I'm really hoping to "just" include a second CSS and use the font in the recommended way. I already insert .png images of the relevant icons as used in our software, but I'd like to use the CSS for scaling color, etc., not to mention having all the characters available.
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:
border: 1px solid #fff3d4;
color: RGB(50, 50, 50);
/*content: "\f071"; - FontAwesome triangle with exclamation mark */
font-family: "Font Awesome 5 Free";
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>
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>
Thanks, Stefan, this sounds great. Will experiment and note here how it goes.
it's pretty much what I was hoping for.
I'm not sure that will work for skin icons, though, will it? Maybe if you add it to the topic.slp?
Sadly, Stefan, my trial RH 2019 trial expired before I managed to experiment with FontAwesome in it. Not sure I can justify the upgrade expense without seeing the FontAwesomeness at work there. 😞
In RH 2019, font-awesome support is there. You can apply the web CSS and we fetch the styles and show them in styles panel on right. Please give it a try and let us know if you face any issue.
Thanks and Regards,
Surbhi_Maheshwari how would that work in my situation, though? We provide responsive help as a download, not as a web service (at this time). We have some customers who don't have access to the internet, simply an intranet. So the help would load with none of the icons I need in that circumstance when it's done as just a css link to the online font-awesome. It sonunds like, based on your comments, that you only support font-awesome using the font-awesome hosted method, not the self-hosting method or actually including it in the project itself. And when clients don't have access to an internet connection, that's not a method I can use.
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?
See www.grainge.org for free RoboHelp and Authoring information.
The sample project above covers that and shows how to set them up in RoboHelp.