Suggestion: Custom icons with Fontello

[DannyBen]

I know this is probably a somewhat radical suggestion, but I think it has potential.

Problem

The current icon set is limiting.
Even though I am a fan of simplicity, and a huge fan of GitHub (and octicons by proxy), even when building my three meager Retype sites, I felt I was limited in icon choice.

Solution

"Bring Your Own Icons" ™️

Throughout the years I have been using different icon fonts, I grew fond of Fontello.

For those not familiar with it, here are the highlights:

• It lets you choose icons from all the famous icons sets (mix and match).
• It creates a web font for you + css with icon-* classes.
• It lets you download a ZIP with all the files needed, including a json file that you can later upload back to the site, and get the same set.

Implementation

So, if thinking in the context of Retype, I would imagine something like this:

1. The user can put the fonts in a predetermined folder (e.g. src/assets/icons).
2. The user can take the short Fontello snippet (the one called fontello-codes.css in the zip) and put it in the same ,or a different predetermined folder.
3. Any use of :icon-* in Retype, will just use these fontello classes.

I am attaching a sample fontello.zip, for reference.

[geoffreymcgill]

I really like this idea. We had always planned for the icon component to allow for user-configured icon sets. For instance, referring to a Font Awesome icon as :icon-font-awesome-bell:.

Supporting Fontello would certainly be possible. I could imagine a super clean solution.

That said, getting multiple icon sets normalized to function with some consistency on a single website is bloody hard. It's fine when you're a designer/developer and have full fine-grained control over the .css and html elements on a custom website, but abstracting that all to the point where it "just works", as is our prime directive with Retype, is, let's say, painful.

I would absolutely love to get this working, or some version of this. We can't take it on right away, but I will bump this up the priority on our TODO list. I'll do some research first with the Fontello .zip package to see how cleanly we can integrate those font icons into the Retype templates, then we can work on the build process and automation.

Thanks for the suggestion.

[DannyBen]

Nice.

referring to a Font Awesome icon as :icon-font-awesome-bell

I, for one, am not a fan of this. This is an "implementation detail". As a user, I want my "stuff" (including icons) to be semantic. I want :icon-bell, and I want to decide how it looks.

Another indirect downside for such an approach, is that Font Awesome - however awesome it is - is a) also limiting, and b) has too many versions, some of which are premium. Fontello eliminates choice by embedding the free Font Awesome version.

Lastly in this regard - Fontello is supporting my need for simple semantics: It lets the user rename any icon they want (in terms of the class it uses), so I can use an icon that is originally named :add-user and rename it to :contact-me to better suit my intentions.

This supports the "optimize code for read, not write" idiom that I am sure we all try to follow.

That said, getting multiple icon sets normalized to function with some consistency on a single website is bloody hard.

This is exactly my argument for using Fontello. To me, when I found it, it was the holy grail of font icons. Since I found it, I was able to add any icon to any site, with zero friction, and in most cases, icons from different "sets" work well together.

Also, don't forget, that we are talking about an added feature, not replacing the current octicons implementation. I feel it is still a great choice for a default set, but if users choose to, they can extend it. Even to a point where, if my fontello config defines an icon that already exists in octicons, it will override it (fontello gets priority).

[geoffreymcgill]

Thanks for the feedback. I agree with your take on the feature.

I think we can make this work. I can't say for sure when we will be able to build, but I too would really like this functionality.

[shideus]

@geoffreymcgill
I fully support it, this is the most essential feature that should have been. It will be great if something like this is introduced as soon as possible.

At the moment, I can set my icons for the navigation bar using the page config, for example, like this "icon: emoji/house.svg", but for some reason I cannot use my own icons directly in the text, titles and etc. It would be very cool if I could use a shortcode for my icons in the text, like "custom-emoji/house.svg". Why hasn't this been implemented yet? 🤔

[geoffreymcgill]

Hi @shnakm. Thanks for the custom icon component request. We (at least I) hadn't thought of what it would take to implement custom icons where you bring your own file. As you noted, we should be able to adapt the logic from the other icon config implementations and apply somehow to the :icon: component. We will investigate.

[geoffreymcgill]

Related thread, see #182.

[jimmybrancaccio]

This is definitely something I would like to see!