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
Related
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 downloaded a free css theme and this theme uses css file and font files for icons and unfortunately the theme has no documentation. How can I visually export them to an html file instead of looking at the CSS file line by line?
https://yadi.sk/d/K1fgjd61wWCy8Q
https://yadi.sk/d/j3tjDtwa3Gucng
https://yadi.sk/d/QCi26iPmPE5QIA
https://yadi.sk/d/POI-p5eOsmQArQ
https://yadi.sk/d/tKJY9lGomWsqmg
It was obviously created through icomoon, but I want to see visually which icons are there.
Just to clarify, you wanted to have a preview of the icons, right? That's why you're asking to convert it to HTML to easily view in the browser. If so, I hope this would do:
With the use of your .SVG file (https://yadi.sk/d/tKJY9lGomWsqmg), you can upload this to https://icomoon.io/. There, you can have a preview of the available icons with their corresponding names.
IcoMoon App has a feature of converting .SVG to icons. And with that, it also offers to have a preview of the icons with their names.
I tried opening the .SVG on itself, but (I'm not an expert here) I didn't get to have a preview of the icons.
I hope that helps.
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
I am trying to convert our project to use the latest macadmine theme. It was using font awesome 3 and now with switching to font awesome 4 I have to change all icons to the proper names. I found this page https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4 but I don't understand what should I use for icon-1x. In many of the i tags I see two icons defined the second being icon-1x. What should I change it to?
Icon-1x does not exist in font awesome, even in version 3. Unless you have styles for it included in something else, you can just get rid of it.
I am using Font Awesome Sass file https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass to make it _font-awesome.sass so I can #import in my Sass project. I am also using http://middlemanapp.com/ to convert Sass to Css. Questions:
Is there a way to bring only used icon classes into my converted .css? Because right now it carried all classes from _font-awesome.sass
BONUS: Is it possible to recompile the fonts somehow with used icon classes to make it smaller on production use?
If I can get some tips on #1 above, that would be awesome enough.
Thanks.
Sass has no idea what classes you are actually using. This is something you will have to manually trim down yourself. Open up the provided .scss file and hack out anything you don't need.
Editing the font file itself to eliminate unneeded glyphs requires a 3rd party application to do so and is beyond the scope of this question.
Fontello is an online web service that can do all of this for you. It lets you mix and match between multiple icon font collections to create the perfect font file for your project. In addition to the customized font file, it provides multiple .css files containing styles already generated for you (changing the extension to .scss will allow you to import them into your existing Sass project).
fontello is very good but IcoMoon is even more awesome.
You can now subset icons from Font-awesome for production use. There is now an official subsetting tool called icnfnt, which allows you to pick and package just the icons you need from the current version of Font-awesome (v3.0.2).
The custom download also includes all CSS, LESS, SCSS and SASS code!
I use LESS and not SASS so you might have to adapt your implementation.
Environment:
Font awesome 4.5.0 (current version)
Ubuntu 14.04 LTS
bash
Use this to generate the list of Unicode character numbers that you need:
fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^#fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done
You then use this with FontSquirrel in the expert mode where you select custom subsetting: http://www.fontsquirrel.com/tools/webfont-generator
In Unicode ranges enter the comma separated values from above.
Then to remove unnecessary stuff from the CSS:
egrep "#fa-var-($fa_icons);" less/font-awesome/icons.less
You'll need to open less/font-awesome/icons.less and paste the output from the grep into the file.
Well, the sass can certainly be jiggled a little to make the selectors % based so they are extendable only. Once this is done, classes can be made to match the wanted icons, and then can #extend the font-awesome classes.
Personally, I do this, and don't actually use the classes in the markup, and just use selectors to the relevant elements and #extend them with these classes.
Example:
// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...
// _core.scss
%#{$fa-css-prefix} {
...
}
Then in your scss
a.search {
#extend %fa;
#extend %fa-search;
}
Et voila.
Fontastic worked for me (it was listed on Font Awesome github page). Select glyphs that you need and download them as a new custom font. Excellent tool.
Iconmoon worked for me. I used it by importing the svg file from font-awesome thus ensuring I get the icons I want and not just the ones available on their site. Also this link helped me with the integration of the new icons
https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/
All the other optimization tools here are browser-based. If you're looking for something that can be easily automated and run locally, fontite might be the best option.
You'd list the icons you're using in the TOML config file. It will create the CSS with just those classes, as well as packing only those icons into your final font file. You can even combine icons from Font Awesome Brands, Font Awesome Solid, etc. into the same CSS and font files.
I think subset-iconfont meet exactly your needs. The purpose of this package is to subset from several icon font packages and use the latest fontawesome css/scss styles. To fit your need, you can do it in a few lines:
npm install --save-dev subset-iconfont #fortawesome/fontawesome-free
then
import { FaFreeProvider } from 'subset-iconfont';
const fa = new FaFreeProvider (['plus', 'clock', '500px'], {
formats: ['ttf', 'woff2'],
});
fa.makeFonts('./outputDir').then((result) => {
console.log('Done!');
});
Then in folder ./outputDir find the result, open the generated index.html to see how to use it.
Besides, you can also subset from some other iconfont packages and use the subset result in FontAwesome style.
P.S., I'm the author of the package.