FontAwesome instead of icons for notes, etc.

This forum is for all Flare issues related to styles, stylesheets and XML.

FontAwesome instead of icons for notes, etc.

Postby chuck_agari on Mon Jul 29, 2019 12:52 pm

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?
chuck_agari
Sr. Propeller Head
 
Posts: 189
Joined: Wed May 30, 2018 2:40 pm

Re: FontAwesome instead of icons for notes, etc.

Postby Dave Lee on Tue Jul 30, 2019 12:12 am

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";
}
Dave Lee
Master Propellus Maximus
 
Posts: 5641
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: FontAwesome instead of icons for notes, etc.

Postby chuck_agari on Tue Jul 30, 2019 11:46 am

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.
chuck_agari
Sr. Propeller Head
 
Posts: 189
Joined: Wed May 30, 2018 2:40 pm

Re: FontAwesome instead of icons for notes, etc.

Postby Dave Lee on Wed Jul 31, 2019 1:24 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5641
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: FontAwesome instead of icons for notes, etc.

Postby chuck_agari on Wed Jul 31, 2019 11:21 am

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?
chuck_agari
Sr. Propeller Head
 
Posts: 189
Joined: Wed May 30, 2018 2:40 pm

Re: FontAwesome instead of icons for notes, etc.

Postby Dave Lee on Wed Jul 31, 2019 11:27 pm

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5641
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 3 guests