• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

4.6K

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.

Votes

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.

Votes

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.

Votes

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.

Votes

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>

Votes

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.

Votes

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?

Votes

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

Votes

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

Votes

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?

Votes

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

Votes

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.

Votes

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
Community Expert ,
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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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

Votes

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
Community Expert ,
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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
Community Expert ,
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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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

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.

Votes

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
Community Beginner ,
Jul 18, 2022 Jul 18, 2022

Copy link to clipboard

Copied

These entries are all a million years old. Why is it SO easy to use fontawesome in Photoshp, XD, etc. but practically IMPOSSIBLE to use in Robohelp? I don't have an answer anywhere here that applies to RoboHelp 2020, and as usual Adobe Help is not helpful. I've installed the fonts on the system, added them as assets, mapped them with @Font-face in the css to find the font assets, no go. Nothing. Only SVGs work.

Votes

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
Community Expert ,
Jul 18, 2022 Jul 18, 2022

Copy link to clipboard

Copied

@defaultnmxh3egi2av0 Last I heard 2019 was only three years ago.

 

See if this helps. Using Font Awesome, Google Fonts, @font-face and SVGs in RoboHelp (grainge.org)

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
Contributor ,
Mar 01, 2023 Mar 01, 2023

Copy link to clipboard

Copied

Peter, do you have a RoboHelp 2020 version of that test project available? I tried converting it, but doing so hangs RoboHelp, and I really really want to get Font Awesome working with my projects. (The icons show up great in the authoring view, but when I generate a PDF, they're missing.)

Thanks!

Votes

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
Community Expert ,
Mar 01, 2023 Mar 01, 2023

Copy link to clipboard

Copied

I'm not Peter but first check the PDF output settings to make sure the font is being embedded in the PDF. I'm not sure what options are available in RH2020 - if there's no option for that, perhaps try outputting to Word and trying the embed settings in the Adobe Acrobat PDF converter (might only be available if you have Acrobat Pro?). If that doesn't work, I think the font needs to be installed on your PC to be embedded in a pdf file. I don't know enough about font awesome to know if this is possible though.

Votes

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
Community Expert ,
Mar 02, 2023 Mar 02, 2023

Copy link to clipboard

Copied

I think I had a problem upgrading that project the first time but it worked later.

 

If not create a 2020 project and copy the topics and assets in. Sorry but I can't do it right now.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
Contributor ,
Mar 02, 2023 Mar 02, 2023

Copy link to clipboard

Copied

Thanks Amebr and Peter. Fonts are embedded, the font is installed in Windows and listed in the project settings. I tried creating a 2020 project and importing the topics and assets from your FontAwesome project, Peter. While the method you described to paste the text for the SVG does work in the PDF, I can't get it to work inline. I want, for example, a small glyph to indicate which links are external and open in a new browser window, but even if I set the size of the viewBox, it doesn't work inline.

 

I'll keep trying stuff and will post a solution if I ever find one, but for now, pasting the SVG as an image and setting its height & width is the only thing that's worked consistently in all outputs. Blergh! 

Votes

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
Community Expert ,
Mar 09, 2023 Mar 09, 2023

Copy link to clipboard

Copied

For what it is worth, I just upgraded locally the project that is on my site and 2022 upgraded it without issue.

 

Have you tried upgrading to 2022 to see if solves the original problem?

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
Contributor ,
Mar 14, 2023 Mar 14, 2023

Copy link to clipboard

Copied

Thanks, Peter! I've installed the 2022 update and successfully upgraded your test project. The problem I experienced previously -- Font Awesome icons won't show inline -- is still present, however. I inserted another icon (external link: <i class="fas fa-external-link"></i>) in the first HTML link text (between the <a> opening and </a> closing tags), but it still doesn't show up. The icons that are by itself in a P tag do. Pasting a PNG works just as well (or better) for images that are alone on a line -- not as well for inline icons.

Votes

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
Resources
RoboHelp Documentation
Download Adobe RoboHelp