What is Reddit's opinion of Fontello?

From 3.5 billion Reddit comments

It depends on what icons you need. I like using fonts as they are scalable, can easily alter color, opacity and layer them to create new icons. Have a look at the following to see if they can help.
http://fortawesome.github.io/Font-Awesome/ http://fontello.com

Font Awesome is great, but unless you really need every single one of those icons, it's probably better to use something like Fontello (which includes Font Awesome icons) to cherry pick the exact icons you want and make a custom webfont.

As a web developer we have been moving to use icon fonts as much as possible, they allow icons to be resizable and not dependent on resolution. All you need to do is save them out individually as an SVG file and use a generator to create a font for you.

http://fontello.com/ https://fontastic.me/

I use fontello, but fontastic also works well.

Same here, which is why I use Fontello. It's basically an icon font generator. Pretty sweet for reducing loading times and you can select the icons you want from various icon packs.

People using full icon-font sets probably just aren't aware how easy it is to customize. Brings the file-size wayyy down to only include what you need.

See http://icomoon.io/app/ or http://fontello.com/

You can make minor edits and tweaks / make completely new icons by uploading your own vector files (on icomoon) to be packaged into the font.

http://fontello.com/ I found that site it lets you select only the icons you want from a handful of icon fonts. I wish they would let you upload your own, as there are a bunch of paid sets they can't offer to everyone, and a bunch more free ones that it's missing.

You could http://fontello.com/ to build your custom font-face or you could create a spritesheet in SCSS/SASS and use it where needed with a class like icon-something.

Either way is fine, it's a matter of preference/work.

The RWD issues is an given but having the ability use symbols with inline text that inherits colour and font size is a huge benefit. Tools like Fontello and fontastic make updating custom icon fonts trivial so long as you have a decent vector editor and SVG exporter (read illustrator). Like most things I think SVGs v Font Icons have optimal use-cases that compliment each other. ¿Porque no los dos?

Just to add to what deadlockgB says, you could also use fontello.com to create a font file that only includes the icons that you use which will reduce the file size considerably - fontello has a number of icon font packs available and you can pick and choose which icons from each font that you wish to use.

> I know there are tools like bootstrap, and that's what I'm planning on learning, but I wanted to ask if there's anything else you guys who do this day to day know of. There are UI kit bundles, or maybe bootstrap alternatives, or maybe you recommend I build my own simple framework?

I think bootstrap (or foundation) is really exactly what you want. If you're sick of the default theme there are some free drop in replacements too: http://bootswatch.com/ With how you describe it, anything else would be re-inventing the wheel or unnecessary IMO.

Also check out some of the free icon sets, such as FontAwesome, or Fontello which lets you mix & match your own.

I have yet to use an icon font in a big project. Interested now, however…

How heavy is the effect on performance if you just include the whole font and styles?

Is it not better to use selected glyphs as with fontello, or is the performance gain minimal?

Sounds like the setup of the icon is wrong. Usally when you gonna use an icon you would have an element with that icon class. i.e <i class="my-icon-pen"></i>, then in the css select all icons [class^="my-icon-"]:before, [class*=" my-icon-"]:before {} to specify some ground css and then individually .my-icon-pen:before { content: '\e800'; }.

This I took from http://fontello.com/ but fontawesome and other do similar.

Just because you add a icon pack or something, it should not break your site or needing to do workarounds.

I haven't used SF Symbols myself, but according to the docs you can export selected symbols as SVGs. You could then use those to build your own font, for example by using fontello, which should allow you display those icons on older iOS.

You need to use a font that includes that character. The default kivy font probably does not.

Embedding icons in fonts is a somewhat popular thing to do even without using standard characters, see e.g. http://fontello.com/. You might find this a nice way to insert a back arrow, just find one you like and use the custom font it provides.

I can't see you example. If I was doing a data merge like this, I think i'd skip the image box bit and create an icon font set at http://fontello.com/ then using that font for a "bullet" paragraph style for each contact detail.

Good thing about setting up as bullet, you can assign a char style to the bullet to customize the colour and scale of bullet/icon.

Me neither! And that article is from March 12, 2013! It's like a decade in web-years!

Browser support is as follows nowdays (according to Google):

Sadly Fontello doesn't support ligatures. Here is an old discussion about the feature.

You could use a CDN for Font Awesome. Your users could then already have it cached before even visiting your site. Or you could generate a custom icon font using e.g. IcoMoon or Fontello with only the icons you need. If you just want to copy & paste some code for the icons, you could use SVG. And if you're concerned about loading multiple SVG files, just use an SVG sprite (icomoon can generate those as well).

I guess there's pros and cons to each solution. I personally prefer SVGs, just because they a little bit sharper compared to fonts (font anti-aliasing makes icons look a little bit blurry), but I guess it would be the same with this CSS method.

You could consider using a font that represents your chords/tabs. A google search turns up some (http://musicfonts.net/guitar/), or you can whip up your own using illustrator and then wrapping it up in fontello (http://fontello.com/) or a similar icon-font generator. That's how I'd do it anyway ;)

Icon Fonts are a considerably smaller pain in the ass. With FA, you get almost 700 scalable/colorable icons in 64kb for Chrome/FF or 81kb for IE.

You can use Fontello and generate icon fonts with only the icons you want. This is really not worth the effort for the vast majority of projects and will just limit your options and cause you to rebuild your library every time you want to add more.

http://fontello.com/ is also a tool that kinda aggregates icons from a number of sources. Plenty of variety. Check out this link that explains Bootstrap grid system easily https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system

Do you really need it to be PHP based to run on demand, or could you use fontello.com?

http://fontello.com

Oh, they have an API already: https://github.com/fontello/fontello#developers-api - that might get you what you need.

I'm sure that font icons would trump sprites since you would need to declare background-position all over your CSS and provide a high-dpi fallback (which opens and closes another HTTP connection).

But also pick which fonts you really need. There's no point in having 50 fonts if you're only going to use 4. I found this site to be very useful for just that: http://fontello.com/