Font Awesome Online The name Font Awesome may seem confusing as it is all about icons. Technically these icons are created in a way that makes them fonts. The code you download from Font Awesome will show in your topics in the default size and colour. You can then apply another class to them to change the size and colour to your requirements. This topic explains how to use Font Awesome for users who will always be online. If some of your users will be working offline, you should use the Desktop version of Font Awesome. That is explained in Font Awesome Offline. Go to https://fontawesome.com/how-to-use/on-the-web Select Free, All. and WebFont. Use the copy icon below the style sheet references and in source view [] paste that into the
tag of your topic (or master page). The RoboHelp editor will show an error as the code from Font Awesome's site is HTML whereas the RoboHelp editor is XHTML compliant. Simply add a forward slash immediately before the closing tag of what you just pasted in as below. anonymous" /> Go to https://fontawesome.com/icons?d=gallery&s=solid&m=free and find the desired icon. Copy the desired icon's code. Make sure there is a paragraph below where you insert the code. Paste that code into the source (code) view of the topic. In this example the code is Two classes are being applied. "fas" is from Font Awesome's css that you pasted into the head section. "fa-coffee" is a class included in the code for the "image" that Font Awesome supplied. In the next step you will define that class as required. You can change its name as long as it matches in both the topic and the your css. In your style sheet, create a class to style the icon (see .fa-coffee in the default.css in this project). .fa-coffee { font-size: 128px; color: blue } If you need the coffee cup to be different colours and sizes in different places, create classes with the required settings. There are some examples of that in the SVG topic. Try it here. Open default.css and change the color of the fa-coffee class to red. NOTES RoboHelp - Once added to your project, the SVG will appear even when you are offline, with the exception of if you open the project on a machine where the project has not been opened before with the SVG in it. Browsers - It will not show in your output if the machine is offline using IE, Chrome or Firefox. It does appear in the new version of Edge but it shouldn't so don't rely on that. I have also found that the image does not appear if you generate a mobile app unless you use the offline method.