I am currently creating an icon component in Angular. For this purpose, I am importing the material-icons library inside my css-file:
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
Now I have access to material icons, I can simply use them with the known syntax, e.g.:
<span class="material-icons">home</span>
All of this works fine as long as the size of my icons equals 24px. However, when resizing the icons, they appear blurry.
I was thinking that material icons are SVGs, and it says on this website that they are available as SVGs. Apparently, I have imported the PNGs and not the SVGs. Is there a way to import the SVGs using a CDN such as the Google fonts I have imported?
Related
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 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
As fonts are better than images to show icons in different devices, I want to make my custom font icon library like "Font Awesome", in my AngularJS project.
Are there any way to do that?
I created a font in .ttf and .svg with my icons, and the result is fine, but any icon have a related letter. For example, the home icon is the letter "H" in the new font.
This method have a little issue in Firefox. In Firefox, before the icon is changed to home icon, you can see the letter "H".
What is the best practice to do that?
Is posible to solve the little issue in Firefox?
Thanks.
Preload the font. FF is using a fallback typeface until the requested face is available.
Why doesn't it happen with FontAwesome?
<i class="fa fa-something"></i>
generates text and only one face is specified for the generated text even when it's contained in an element with a style that does specify a fallback list.
I suggest you look at the CSS that accompanies FA.
You should try using a tool like Font Custom to generate your custom icon webfonts starting from your svg icons. FontCustom will generate the css and the font files and there are a lot of options that you can configure.
lately I've been trying to find a sprite sheet similar to bootstrap's but with emotion icons only (smiley face, sad face, etc), but can't seem to find one. Does anyone know of one with the css that goes along with it?
Sure, try IcoMoon App
then check put the IcoMoon Free font, it has quite a bunch of emoticon fonts.
Otherwise, you can download some free emoticon package, convert the images to SVG and then import into IcoMoon App, then the app will create your font set with CSS included
I'm using jQuery SVG Plugin to work with SVG on client (web browser) side.
At an specific situation, I have to add an FontAwesome icon to the SVG.
FontAwesome icons on SVG works well, normally, if they are part of the origin SVG, which is loaded by the jQuery SVG plugin.
The problem appears by adding icons dynamic with the following line, where mainSVG is the global SVG object.
mainSVG.text(null, x, y, '&#'+iconCode);
Where iconCode is something like "xf007"
...followed by adding some position and style attributes.
Adding the text element to the svg works fine.
The result is a string '', which is added insight an text-object which is now part of to the svg.
<text x="49" y="139" style="font-family: FontAwesome;
font-weight: normal; font-size: 6px;" class="dot">

</text>
But: it's shown as an string and not as an icon. By the way: the css style definition for the FontAwesome is loaded and known insight the SVG.
The thing is: if I modify the SVG using firebug for an very tiny change (like adding an blank between to SVG elements), the icon become visibly.
For me this is a very strange behaviour an it looks like, the browser simply doesn't notice new added icon. Or: the browser notice the new added icon only after making some tiny change on the svg object using firebug.
So my question is: how can I add dynamic FontAwesome icons to an svg using jQuery or how can I trigger the browser / svg "viewer" plugin to notice the icon in order to display the icon by using the existing css definition?