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?
FontAwesome instead of icons for notes, etc.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: FontAwesome instead of icons for notes, etc.
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.
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";
}
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: FontAwesome instead of icons for notes, etc.
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:
I changed my code to look like this:
(The commented out part was using a graphic file.)
And I added this:
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.
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);
}
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;
}
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);
}
Re: FontAwesome instead of icons for notes, etc.
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):
To get any font working with Flare's PDFs, you need to have the TTF file locally installed in Windows on your PC.
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.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: FontAwesome instead of icons for notes, etc.
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.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.
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?
Re: FontAwesome instead of icons for notes, etc.
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.
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.