FontAwesome instead of icons for notes, etc.

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

FontAwesome instead of icons for notes, etc.

Post by chuck_agari »

So this article (https://www.madcapsoftware.com/blog/201 ... ples-tips/) has some very nice looking notes, tips, etc. Except that it uses graphic files for the icons. I'd like to figure out a way to use Font Awesome glyphs instead.

I have Font Awesome 5 Pro installed, so I am able to enter glyphs inline as necessary when documenting their appearance in our product (Go to the Font Awesome site, search for the glyph, copy its Unicode value, go back to Flare, Insert Character, select Font Awesome 5 Pro, paste the Unicode i the search box and click Search, select the glyph, click Insert, whew!), and they appear fine in both HTML5 and PDF output (I also have @font-face definitions in my CSS referencing the installed .ttf files).

What I want to do is use FA glyphs similar to the graphic files used in this blog post, but I'm not quite sure how to code the CSS to do this. Any CSS experts around that can guide me how to take the CSS that there and modify it to correctly use FA glyphs instead in both types of output?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome instead of icons for notes, etc.

Post by NorthEast »

Instead of using a background image, you'd insert the FA icon by using ::before and set the content to the unicode value of the FA glyph.

For example, to insert fa-exclamation-triangle (unicode f071) to a p.note class.

Code: Select all

p.note::before
{
	font-family: "FontAwesome";
	content: "\f071";
}
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Re: FontAwesome instead of icons for notes, etc.

Post by chuck_agari »

Thanks Dave. I think I had tried something similar before and was unsuccessful. But I gave it another try.

First, I have this at the top of my CSS:

Code: Select all

@font-face {
	font-family: "Font Awesome 5 Pro Solid";
	src: url(../Fonts/webfonts/fa-solid-900.ttf);
}
I changed my code to look like this:

Code: Select all

.note,
p.note,
div.note
{
     background-color: var(--agari-mauve-light);
     /* background-image: url(../Images/icon_note.png);
     background-position: 9px 0px;
     background-repeat: no-repeat; */
     border-left: solid 4px var(--agari-mauve);
	 border-top: solid 1px var(--agari-mauve);
	 border-radius: 6px;
	 -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     line-height: 18px;
     overflow: hidden;
     padding: 15px 30px 15px 60px;
}
(The commented out part was using a graphic file.)

And I added this:

Code: Select all

.note::before, p.note::before, div.note::before {
	font-family: "Font Awesome 5 Pro Solid";
	content: "\f15c";
	color: var(--agari-mauve);
}
At least when I'm testing target types from within a topic, this renders fine in HTML5, but not in PDF> Nothing at all shows up in PDF output, just, it looks like, a little space where something should be being rendered. It also does not render in the XML editor.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome instead of icons for notes, etc.

Post by NorthEast »

Works fine for me.

I didn't have to add any @font-face CSS. I'm using FA 4.7, and its CSS already defines @font-face as such (I've modified the paths, but nothing else):

Code: Select all

@font-face 
{
	font-family: 'FontAwesome';
	src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}


To get any font working with Flare's PDFs, you need to have the TTF file locally installed in Windows on your PC.
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Re: FontAwesome instead of icons for notes, etc.

Post by chuck_agari »

Dave Lee wrote:To get any font working with Flare's PDFs, you need to have the TTF file locally installed in Windows on your PC.
But I do. I have the Font Awesome (5.x) font files installed to Windows like they would normally be installed, and the .ttf files for Solid, Regular, and Light are all in C:\WINDOWS\FONTS\ (which is why, I think, I can select Font Awesome in the XML editor or when I am inserting a character), and the .eot, .svg, .ttf, .woff, and .woff2 versions are also in the Content/Resources/Fonts/webfonts folder in my project.

Not quite sure why they are necessary in both places, BTW.

I wonder if the more complex definitions in your CSS would work for me. I'll give it a try--although do I really need the version?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome instead of icons for notes, etc.

Post by NorthEast »

The @font-face CSS stuff I posted is an extract from FA's CSS file in v4.7 - I didn't have to add it, I just tweaked the path.

I don't use FA v5, so I don't know how its setup and CSS is different to v4.7. You need to check the instructions with FA v5.
Post Reply