Known Participant

質問

Font Awesome Icons in RoboHelp

Forum|Forum|8 years ago
August 25, 2017
返信数 13.
8377 ビュー

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.

このトピックへの返信は締め切られました。

A

Amebr

Community Expert

Perhaps some screenshots of what you see will help figure out what's going on.

K

KarenMinOR

Inspiring

Thanks, Amebr. In the HTML, the <head> has

<link rel="stylesheet" type="text/css" href="assets/fontawesome_pro_5.15.3_web/css/all.css" />

The link looks like this:

<a href="https://help.example.com" target="_blank"><i class="fas fa-external-link"></i> Support Website</a>

In the Authoring view in RH, it looks great:

This is how I want the link to look in the frameless HTML and PDF outputs:

The above was created by pasting the SVG as an image and resizing it:

<img src="assets/svgs/used/external-link.svg" width="14" height="14" />

If I use the Font-Awesome method (), this is the result:

The icon doesn't print whether I output to HTML or PDF and whether I use the latest RH 2020 or 2022.

A

Amebr

Community Expert

Hmm, the method uses ::before to insert the icon so perhaps the pdf compiler doesn't convert that reference properly? It's possiblly a quirk of the pdf compiler but you'd have to confirm that with Adobe, as I haven't been able to find any documentation about the PDF compilers in any HAT, nor documentation about what CSS is supported and any limitations.

See the following page for support contact options. The email address is recommended as it goes to a dedicated Robohelp team.
https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp

Peter Grainge

Community Expert

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.

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

K

KarenMinOR

Inspiring

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: ) 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.

D

defaultnmxh3egi2av0

Participant

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 @11220649-face in the css to find the font assets, no go. Nothing. Only SVGs work.

Peter Grainge

Community Expert

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

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.

K

KarenMinOR

Inspiring

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!

shootathought

Inspiring

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.

NickShears

Inspiring

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.

S

Stefan Gentz

Community Manager

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.

NickShears

Inspiring

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.

shootathought

Inspiring

It was already set, yes. Problem is the .png images exported from that site look pretty crappy when you scale them. I basically export them for every size I need them in because taking the 256x256 and telling robohelp to make it 100x100 results in an awful looking image.

shootathought

Inspiring

I do really like them, and I did submit an official feature request to make it work [properly]. I ended up giving up today because every time I generated something would break. Robohelp has issues with using these as baggage files, and with having hyphens in the names of the css files, and with using more than one css file in a topic. While I can make it work, because of the way we do things around here, I don't do the final generation, a developer does, and it's just too much to expect him to copy the css file into the output directory every time RoboHelp ignores it on output, or to deal with it freezing on "preparing files for responsive html5 output" when it it does that but the references are still there.

I ended up finding this: Convert Icon Fonts To PNG - fa2png.io . That tool lets you generate a png file of any of the font-awesome fonts. While they won't be responsive, at least I can use the same icons that the developers are using in the product, and people will be somewhat happy, I hope.

Captiv8r

Legend

Hi there

In your output settings dialog, if you click the Optimization section, do you have the option for converting to relative image size enabled?

I'm thinking that should make the images as you want, no?

Cheers... Rick

shootathought

Inspiring

I'll be using them in topics, too. Tips, warnings, info, copyright at the page bottoms, external links, etc. It is the company standard where I am for our next product, and everything Stefan said is right... they are very nice when they work.

shootathought

Inspiring

I keep remembering things... it's taken me 2 days to get this to work! LOL

RoboHelp doesn't really like hyphens in the CSS references. You might need to perform a bit of renaming shenanigans... like font-awesome.css to fontawesome.css. You'll also need to make sure the paths in the two font-awesome CSS files that point to the font files are all correct. Take out the ../fonts/ in front of the paths.

Captiv8r

Legend

Can you perhaps post a screen capture showing what all this "font awesomeness" is and why folks would want to jump through all these hoops to achieve it?

Must be pretty awesome, eh? LOL

Cheers... Rick

shootathought

Inspiring

Font-awesome is a third party font/icon set that is free, consistent, and fairly easy to use (except in robohelp). A lot of developers are starting to use it for their UI builds. Facebook uses these icons in their mobile app! Here's their site: Font Awesome, the iconic font and CSS toolkit!

shootathought

Inspiring

It also sometimes removes the CSS files for font-awesome from the baggage registry. Sometimes I'll run the output and it won't have any of the fonts. I just have to re-ad the CSS files as baggage and that seems to fix it for a while.

さらに返信を表示

サインアップ

ソーシャルログイン

コミュニティへログイン

ソーシャルログイン

ファイルをウイルススキャンする。

このファイルはダウンロードできません