I'm using Fontawesome's CDN for SVG icons: https://pro.fontawesome.com/releases/v5.8.2/js/all.js
It's great but it's getting too big for a very few icons that I need. Is there a way to pick only the icons that I need? I don't mind hosting this file locally if I can reduce it's size considerably.
Thanks.
Font-awesome is great but if you only need a few icons you may want to use IcoMoon where you can choose the icons that are going to be loaded only including the ones from Font-Awesome
Otherwise, you may want to check this blog that explains how to reduce font-awesome size.
Related
Does anybody know if SVG iconsets are working as of the current version? (1.0.7)
I'm strugling to use some custom svg with the md-icon directive but I haven't managed to see anything on the screen. Is there something broken or it's simply not implemented?
Any example of how to create and use an svg iconset file?
I know I can use the md-svg-src attribute to load one specific svg file providing its url, but that forces me to have all svgs on separated files and it also doesn't play well with the template cache.
Note: I'm using SVGs for the icons, not an icon font.
I have been making my own webfont taking as a starting point articles from web designer depot and intridea.
I know different engines render fonts differently and but the issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).
I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?
I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.
My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?
This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.
I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.
Some reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations
There's a webapp, icomoon : http://icomoon.io/app/
It make the job pretty well but you have to test the rendering of the different icons.
They offert a lot of icons if you don't want do design everything.
I had the same problem, and solved it by manually setting the metrics for all three types.
You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413
I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.
How to make thumbnail images for custom Liferay Layouts? If anyone has done it using any open-source software, please help!
In Liferay 6.1 source folder /liferay-portal-src-6.1.0-ce-ga1/portal-web/docroot/layouttpl there is a zip file called thumbnails.zip which in turn contains thumbnails.psd, which contains thumbnail images for all the bundled layout templates. As for an open-source image image editing software, there is Gimp. Unfortunately, I didn't have much luck opening the mentioned file with it - the glossy overlay lost it alpha value and the large background rectangles seemingly lost their gradients and are all solidly colored. You could try Paint.net as well, which also stands in high regard among free image editing software.
The latest version of liferay docs containing any mention of layout templates thumbnails are for Liferay 6.0 series and you can find it here. There is also an empty png layout thumbnail template with proper background gradient, but you would have to make your own gloss over the little light rectangles as well as make the corners round...
All in all, you could also try to make the thumbnails from scratch, give them a more unique look. The image from Liferay docs should give you the idea of what it should like to still look nice next to bundled layouts' thumbnails. I'd just suggest to try and use vector image editing software. The bundled thumbnails all look simple enough to draw them with vectors, which would give you more flexibility and ability to change your mind anytime about details without having to draw everything all over again.
And that's for a 121x121 px image...
I am investigating the usage of SVG fonts in #font-face declaration. So far, only Safari 4 and Opera 10 seem to support it. Firefox 3.5 does not support it but there is a bug report but no fix has been supplied yet (though there are patches).
I am wondering, with #font-face support in major browsers, what is the advantage of using SVG font format in lieu of TTF/OTF/EOT formats? The only advantage I can glean from the discussion linked above was that you can add your own missing gylphs to fonts that do not support them yet.
Is there any other reason to specify SVG fonts in CSS?
It seems to be the only way to use web fonts on Mobile Safari. So that's a pretty big advantage if you're developing for iPhones and iPads. Font Squirrel's #font-face generator can create the appropriate SVG file and CSS syntax from any OpenType font.
The W3C states these advantages:
One disadvantage to the WebFont facility to date is that specifications such as [CSS2] do not require support of particular font formats. The result is that different implementations support different Web font formats, thereby making it difficult for Web site creators to post a single Web site using WebFonts that work across all user agents.
To provide a common font format for SVG that is guaranteed to be supported by all conforming SVG viewers, SVG provides a facility to define fonts in SVG. This facility is called SVG fonts.
SVG fonts can improve the semantic richness of graphics that represent text. For example, many company logos consist of the company name drawn artistically. In some cases, accessibility may be enhanced by expressing the logo as a series of glyphs in an SVG font and then rendering the logo as a 'text' element which references this font.
But the point of a common format doesn't really count because of the lacking browser support.
svg webfonts cannot work within an offline webapp. You can see an example here: http://straathof.acadnet.ca/beta2.2 Save this file to an idevice homepage, turn on airplane mode and open it. The svg fonts and the naming system used cause the font url to fail.
hopefully Apple fixes that soon.
Does IE6 support css-sprites?
Yes IE 6 supports sprites but doesn't support 24 bit PNG transparency.
I use this css hack for giving IE < 7 a gif file and everything else a 24 bit png with transparency.
background-image:url(/images/sprites/icons-sprite.png);
_background-image:url(/images/sprites/icons-sprite.gif); /* IE<7 gets the crappy icons */
You can also use Glue http://gluecss.com/
It's an open-source command line tool to generate sprites.
CSS sprites is a general solution using backround-position, which is avaible even in IE5.
A good tutorial about them is located here: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
I have encountered the IE6 CSS sprites problem myself - I blogged it here:
There's a really easy fix - I quote myself here...
Luckily, the solution wasn't too bad. Internet Explorers passim seem to ignore overflow:hidden when a child element is set to position:relative. Not good news... but the solution is easy - set the element with overflow:hidden to also be position:relative and then change the position:relative declaration on the child to be position:absolute... the jobs a goodun.
The full details can be found on that link.
Yes. If you're using PNGs though you should consider a few things. Here is a decent summary of IE 6 PNG issues:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
Yes.
CSS sprites is just a technique to use offset on background images to display different parts of the same image in different elements.
I use CSS sprites on for example the main menu on the website of the company I work for, and the flags on my own web site. I started using it before it was even called CSS sprites...
Browsers which support background-position property will support CSS sprites also.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Please take a look at the following questions also
CSS Sprites images rendered with bad quality in IE
CSS Sprite Help
You could just use an online sprites generator. There are so many of them available for free and most of them support all browsers.
Sprites can work perfectly in ie6. But a png image will not work, so use a gif. If you process a gif with Smush.it to losslessly remove overhead, you might get a file size smaller than the corresponding png.