I am looking to use the older version of the fontawesome icons in my Rmd files which I then make into slides.
I specifically would like to use version 5 (rather than the current version 6), as I prefer the look of some of the icons.
I am aware that I can use fontawesome::fa("stack-verflow") inside code chunks to output an SVG icon but I cannot find any reference in the help files to specify the version of fontawesome used and it understandably defaults to the most recent version 6.
Does anyone know of a work around about how I can specify version 5 of fontawesome icons?
Thanks
In my Vue 3 project I need to use some Font Awesome icons, but not all obviously. But if I load icons as webfont, it loads all informations of all icons.
If I use icons as SVG I lost the benefit using icons as font. For example: adjust to font size, color, etc.
In Angular I can use <fa-icon ...> tag to use icons like this.
How can I load only used icons but still keep font-behavior benefits?
Have a look at #unocss/preset-icons it will do it automatically for you and you will gain access to a bunch of other icons as well.
The CSS it uses for the icons is different, they are not used like font, but one may still change their color & size by setting the corresponding font properties. Check this post for more info.
I am trying to use Tabler icons in my project React typescript project via classNames and for some unknown reasons, some icons appear filled. Please note that my CSS skills are not so good.
The library comes with
Font icons
PNG icons
And SVG icons
When I check the font icons some icons appear completely filled and because of this when I try to access them like className="ti ti-discount" I get icons that look like while the SVG and PNG counterparts look like , am confused, how can I resolve this?
For anyone who sees this question, the poster created a GitHub issue here: https://github.com/tabler/tabler-icons/issues/102. According to the project's maintainer, the problem should be solved in the near future (I'd guess early 2021): https://github.com/tabler/tabler-icons/pull/92.
I am digging into an existing reactJS site, and many images are being rendered by using the css content property. I am looking at the css sheet in VSCode, and many classes are appearing with content listed as "". I'm not sure if I need a plugin to view the actual content, but I can't find a way to see it at this point.
I can use alter the content attribute to point to a different image, but want to know where this is being generated so I can alter it at the source. The site is setup to use Contentful, but assets there are called directly on pages, not in css.
.fa-discord:after {
content: "";
}
I'd like to be able to track down where this image is being stored or generated. Any help is appreciated!
That's a Font Awesome icon for Discord, and can be found here. Yes, you need to include Font Awesome on your website if you want to render any of their glyph icons. And you can easily work out whether a website is attempting to use Font Awesome glyph icons or not, as their selectors all start with fa- and replace the content.
Font Awesome icons are generated through an included CSS file, most commonly located in a folder like /fonts/font-awesome/css/font-awesome.min.css.
This file uses unicode characters to generate the corresponding glyph representations, and the specific unicode character for the Discord icon is 392. Thus, content: "\f392" will render the relevant glyph icon.
If a box or square shows up instead of an actual glyph, that means that the font you're using doesn't incorporate that particular unicode glyph. Font Awesome rapidly expands its coverage of unicode glyphs, and you will need to update to at least Font Awesome 5.0.0 in order to use the Discord glyph.
I need font-awesome to have spinner icons.
I could include the whole font-awesome library. But wouldn't that be an overkill for just one icon? Is there a way to include just one icon or component? The problem seems to be, that the library is not modularised to different files. For example, if using scss, all icons are in _icons.scss file, rather than each icon in their own file. If you use pure css, then everything is in one file.
You can't. A font is a single file, much like an image or a document. It doesn't matter how you include it in your CSS -- users will still download the whole font file. The CSS definitions just make the font available on your web site.
There are some things that you could do as an alternative. There are some companies that will allow you to generate partial font sets using custom applications (like https://icomoon.io/, for example). That might suit your needs. But, once you create a custom version of their fonts it's still a file that you can't break up. Still, a custom version of icomoon can be very small and streamlined and would likely fit the scenario you describe.
Another alternative would be to not host the font yourself but use cloud-based fonts that are more likely to be cached by your users. It's not a solution per se but would increase the chances somewhat that your users wouldn't have to download the fonts specifically for your site.
Font awesome v5 supports partial styles, in the getting-started page (https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use), you could include this essential file first:
<link href=/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
and then, you could include one or some of those:
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/regular.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
Very old question, but now you can use their JS API, which will load only selected SVG files. This incredibly lowers the bundle size.
npm install #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icon
and then
import { library, dom } from '#fortawesome/fontawesome-svg-core'
import { faCamera } from '#fortawesome/free-solid-svg-icons'
library.add(faCamera)
dom.watch()
<i class="fa-solid fa-camera"></i>
Two years on after this question was asked, I would suggest you use SVGs rather than an icon font. You can concatenate all your SVGs into an SVG spritesheet, so they all get loaded (and cached) using a single HTTP request. The file will be much smaller than an entire icon font, which was your requirement.
Here are some reasons to pick SVGs over icon fonts (also see here):
You're including only the icons that you want, obviously.
SVG icons allow you to create multicolored icons.
Icons fonts are anti-aliased by the browser. SVGs are not, so they look sharper.
Font icons can be hard to position. SVGs are easy.
SVG icons can have baked-in titles and descriptions, which is good for accessibility.
To get high performance, you'll need to place all your SVG icons in a sprite sheet. You can do this using svgstore (grunt and gulp and webpack versions are available) so that it's part of your build process.
FontAwesome makes all its icons available as SVG files, so you can pick the ones you want and add them to your spritesheet build.
Yes You can, try this Optimize Font Awesome To Ridiculously Low Size Of 10KB!
This is an old question. However, there is a workaround.
I will assume that you are using npm and webpack. (in my case I use Laravel, which includes npm)
Open the folder node_modules/#fortawesome/fontawesome-free/js. Now say you want to use the facebook icon only in the brands.js.
copy brands.js and past it with another name -say 'brands_used.js'- in the same folder
open brands_used.js and comment the var icons = {...}; section, keep it for reference latter
type in a new variable with the icons you want included only, which will be a copy/past from the commented section.
var icons = {
"facebook-f":[...],
};
require the newly created files in your js assets folder
compile your assets
Icomoon lets you use their standalone svgs.
https://github.com/Keyamoon/IcoMoon-Free/tree/master/SVG