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'm trying to create a flexible sprite solution for my website whereby I can have one version of each icon within the sprite image but have the ability to change it';s colour dynamically. I know you can do this if you embed the SVG into your page but I don't want to do this as I will be using it as a background-image in css/sass. I have looked at the following article which looks promising and have it working as described in Chrome but having also looked at caniuse.com (http://caniuse.com/#search=URI) I have also realised that IE only support base64 image data. This prevents me from changing the fill colours of the paths in my SVG data.
Modify SVG fill color when being served as Background-Image
I am using gulp with my project and my question is, would I be able to convert something like this which will be in my sass file:
background:url('data:image/svg+xml;utf8,<svg> ... </svg>');
into a base64 version like so with gulp?
background:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uP...');
This would enable me to change the colours dynamically with variables etc in my sass but also have IE support.
This looked like it might be a possibility but I'm not sure if it would work as my image is data to begin with whereas in the example, it's an iamge URL.
http://stefanimhoff.de/2014/gulp-tutorial-7-base64/
Found a solution - https://www.npmjs.com/package/gulp-css-str2base64.
This allows me to wrap my SVG data string in the str2base64 function which then converts it. I run this task after my sass task to ensure the variables have been applied before the data is encoded.
converting a PDF page to a SVG document works OK with inkscape.
However I noticed that many style elements are heavily duplicated in the output SVG.
I noticed that embedding CSS into SVG seems to be possible using inkscape's UI.
Does anyone know if (and how) this CSS conversion can be called from inkscape's command-line (or through some inkscape API) as well?
Kind regards,
Marius
Here is a demo SVG file. Please use Firefox for viewing because currently it seems to be the only properly showing browser.
The task is to construct a pure SVG document (e.g. not html-embedded) that will be able to show tooltips using only CSS features (no JS and also no :before/:after pseudo-elements). I managed to achieve this by using the HTML foreignObject element.
However, I can not find if it is possible to position such elements in relation (e.g. 10px to the left and top from it) to other in-document SVG objects without using JavaScript for it and without embedding the SVG file itself into some other document format (e.g. HTML).
In the final version of the file there will be 20-30+ tooltips, so it is desirable to avoid manual positioning. I was hoping there would be something for "attaching" them to other objects (withthe use of their IDs) or at least to their parent objects, but my search results only return documentation and questions regarding JS or HTML implementations.
add. notes:
1) CSS-only SVG file is required because the file is intended to be used on wiki sites, which prohibid SVGs that have javascript in them.
2) If I understand correctly, displaying HTML formatting in HTML foreignObject element is not a current SVG standard requirement for SVG user agents (i.a. web-browsers). However, Firefox seems to properly display them, and I’d rather use that (even not fully supported) opportunity. If I am missing some easier ways of achieving the same thing — please do tell about them.
3) SVG code backup: pastebin.
Unfortunately, you can't achieve this effect using just CSS because positions in SVG are attributes, not styles.
I'm wondering if I can create multiple "brushes" in a single SVG file and use them thoughout my CSS.
Right now I have a single SVG file that has a gradient stored in the "defs" and a single rectangle that draws it. Then I use this SVG file as a background image in my CSS. It works well but I'd rather not have a million separate SVG files. I'd like to combine like "brushes" together in a single SVG file something like CSS sprites or XAML is capable of.
Is there a way to do this? If so what's the syntax to specify for the CSS background image which SVG element from the svg file to use?
Thanks for any help.
In theory yes, that should be possible. It's not yet fully defined in a w3c spec though and the implementations do differ at this stage.
Note that svg itself allows a special fragment syntax, so in theory you should be able to link to different views of the same svg file. That could be used to do CSS/SVG sprites.
Linking directly to the id of a nested svg fragment (or to any other element inside the svg) is something that would need to be further specified.
Assuming that linking with fragments from a CSS background property works, then a possibility if you use XHTML (serving the resulting file as application/xhtml+xml) is to just include the svg resources inline in the main document, eliminating the need for many separate files. This can be done as a pre-publishing buildstep if you wish to keep the svgs separate for editing. Another possibility is to use data uris.
I'm also seeking for the same, and here are the pointers I could find:
17.3 Linking into SVG content: IRI fragments and SVG views (w3.org)
SVG Stacks (simurai.com)
Can I use SVG fragment identifiers? (caniuse.com)
Better SVG Sprites With Fragment Identifiers (broken-links.com)
According to caniuse.com, there is an issue with browser support, but that does not prevent you to try and observe future browser evolution (in the hope a future day they will all support this obvious feature).