#GLYPH FONT FREE AWESOME CODE#

#GLYPH FONT FREE AWESOME CODE#

All you need to do is host your own CDN for your icons and add one line of code to make SimpleSVG load icons with your custom prefix from your server.

Can SimpleSVG be used with premium icon sets? Yes.More details on that will be added later. Or instead of hosting, you can append icons to page as script.

Tools for hosting custom CDN are already available on GitHub. Tools for creating custom sets will be published within next few weeks. Want to create your own icons set? It is possible.Downside is you need to specify color in URL because backgrounds cannot inherit color from DOM element. CDN can generate SVG images that you can use as background in stylesheet. Want to use SVG as backgrounds? It is possible.Currently plugins are available for FontAwesome, Icalicons and PrestaShop icons. Migrating from glyph font? There are several plugins available that lets you use SimpleSVG without changing code.Though currently it is not a proper CDN, its basic hosting provided by me. 100 icons takes only 15-20kb (sometimes more, sometimes less - depends on complexity of shapes of those icons). One HTTP(S) request can load several icons at the same time without SVG overhead, so it loads fast and uses less bandwidth. Icons are loaded in bulk from CDN as JSON data, which contains only shapes, width and height.More details on that will be posted later. There is also option to set custom dimensions using width and height attributes. You don't need to worry about dimensions of original SVG icon, SimpleSVG will take care of everything for you. To change icon height you need to set different font-size. Icons are automatically scaled down to current font size and aligned to baseline, just like glyph fonts.It works just like glyph fonts: to change color you need to set color in stylesheet using something like 'color: red'. Monotone icons inherit color from stylesheet.What makes SimpleSVG different from inserting SVG into document: No more blurring because of font rendering settings. Icons are rendered exactly the same in all browsers.Icons will be displayed exactly the same for all visitors, regardless of their browser and operating system. Using SimpleSVG you can use any or all of those emoji sets on same page. Emojis! Default collection includes several emoji sets: Emoji One, Firefox Emoji, Noto Emoji, Twitter Emoji.

Over 20,000 premade icons to choose from, including FontAwesome, MDI, Entypo+ and many other collections.Glyph fonts load entire fonts, SimpleSVG loads only icons that are used on page. What makes SimpleSVG different from glyph fonts: Add one line of code to page, preferably before :įor list of available icons see search form in 'Samples' section below. It is SVG framework that works similar to glyph fonts, but without glyph fonts downsides. First it was a project designed for my own styles, but later it grew into a bigger separate project that I decided to release as open source. So I wrote a library that solves all those issues. Glyph fonts are - just plug it in, write few lines of code and that's all. Preload SVG into DOM? Every image will be loaded on each page load, often multiple times per page (not all browsers support sprites).That makes external SVG images very hard to use. That means each SVG image has to be stored separately. SVG sprites aren't supported by some browsers, making them completely useless for anything other than experimenting.That means if image supposed to change color when clicked, entire image has to be replaced with different image. That means each shape in SVG image must have hardcoded color. Using SVG icons as external images, like PNG/JPG/GIF, has some downsides:.There are bunch of issues with using SVG icons: Those are all vector icons, so displaying them as SVG shouldn't be hard, right? Wrong. In preparation for XenForo 2 I wanted to find a solution for those issues. Using font to display icons means icons will not be shown the same way for all clients. Fonts are rendered differently on different operating systems and even in different browsers on same operating system. Because of that selection of icons is limited to few fonts. Loading more than 2 fonts will slow down your page a lot, so almost nobody uses more than 1 font. When selecting any font, you are pretty much limited to icons in that font because of loading speed. You cannot just select which icons to load, entire font has to be loaded. awesome, but as any other glyph font, it has downsides that limit users to only small set of icons: You can select custom icon for node, which is cool, but you are limited to small set of FontAwesome icons.įontAwesome is. XenForo 2 default style uses FontAwesome.

Glyph font free awesome