Font Awesome Icons in RoboHelp

New Here ,
Aug 25, 2017 Aug 25, 2017

Copy link to clipboard

Copied

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.

TOPICS
Classic

Views

3.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 19, 2019 Feb 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 26, 2019 Feb 26, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 26, 2019 Feb 26, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 27, 2019 Feb 27, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 27, 2019 Feb 27, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Feb 27, 2019 Feb 27, 2019

Copy link to clipboard

Copied

Thanks, Stefan, this sounds great. Will experiment and note here how it goes.

it's pretty much what I was hoping for.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 07, 2019 Mar 07, 2019

Copy link to clipboard

Copied

I'm not sure that will work for skin icons, though, will it? Maybe if you add it to the topic.slp?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 10, 2019 Mar 10, 2019

Copy link to clipboard

Copied

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. 😞

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 10, 2019 Mar 10, 2019

Copy link to clipboard

Copied

Please drop me a mail at amisingh@adobe.com and we could help so you can try font awesome with RH2019

Thanks

Amitoj singh

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 07, 2019 Mar 07, 2019

Copy link to clipboard

Copied

NickShears

They promised that for 2019, and the bug tracker shows it as in test, so soon! maybe even next the next update, which is due maybe next week sometime?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 18, 2019 Mar 18, 2019

Copy link to clipboard

Copied

Hi,

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
May 03, 2019 May 03, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 04, 2019 May 04, 2019

Copy link to clipboard

Copied

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.

Download the project.

Download the output


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 04, 2019 May 04, 2019

Copy link to clipboard

Copied

You can also download the FontAwesome icon fonts for desktop/offline use.

Details instructions can be found here: https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 04, 2019 May 04, 2019

Copy link to clipboard

Copied

The sample project above covers that and shows how to set them up in RoboHelp.

Peter Grainge

www.grainge.org

@petergrainge

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 26, 2019 May 26, 2019

Copy link to clipboard

Copied

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.

@petergrainge

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Sep 24, 2019 Sep 24, 2019

Copy link to clipboard

Copied

LATEST
It seems to be the same way I've been using them all along, download the svg and manipulate it on my own. It' frustrating, because I can't use the cool features of font-awesome, like spinning, when I just use the xml code on the page or import the svg file as baggage. I can't see any way to use them after installing the fonts on my system, either. RoboHelp just ignores them in the font list in the editor.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
    • 1
    • 2
Resources
RoboHelp Documentation
Download Adobe RoboHelp