Change current bitmap icons for font icons

Registered by Jaromir Coufal on 2013-08-06

Bitmap icons provide us only one size, one color, etc. In general they are not flexible.

Having font icon library, we can operate much better with sizes, colors, background-positions, drop shadows, etc.

Step 1: Choose font library (select needed icons)
Step 2: Include the font into the project (together with all css rules)
Step 3: Indicate all bitmap icons and replace them with font icons (moved to separate blueptint https://blueprints.launchpad.net/horizon/+spec/font-icons-replace)

Don't forget about proper documentation (list of included icons and related css classes).

More information about our possibilities follows in Whiteboard.

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
Low
Drafter:
Jaromir Coufal
Direction:
Needs approval
Assignee:
Lennart Regebro
Definition:
Approved
Series goal:
Accepted for juno
Implementation:
Implemented
Milestone target:
milestone icon 2014.2
Started by
Radomir Dopieralski on 2014-08-19
Completed by
Radomir Dopieralski on 2014-09-02

Related branches

Sprints

Whiteboard

[jcoufal]
One possibility is to use Glyphicons [1] from new version of Twitter Bootstrap (it switched to font icons). But there is limited set and only for general purposes. It might not be enough for later needs.

Other possibility is to use full PRO version of Glyphicons [2], it is charged with some amount, but the author is my friend and I managed to make a deal that OpenStack can use that set for free. Details can follow, if this is the option.

Last option for us is popular open source library Font Awesome [3], which in some cases copies Glyphicons in not very good way, but is usable as well.

[1] http://glyphicons.getbootstrap.com/
[2] http://glyphicons.com/
[3] http://fortawesome.github.io/Font-Awesome/

[david-lyle]
I think the distros might have an objection to #2.

[jcoufal]
Yeah, I think you are right. So far, I would say that #3 looks as the best option for us.

[lblanchard]

Just wanted to add another idea to the list to check out:
http://icomoon.io/
http://icomoon.io/#docs

[jtomasek]
I would like to mention Fontello [4] here. The Font-Awesome is it's subset and the number of icons is still growing. Fontello features ability to select only icons that we need and save the json config that carries information about the selected icons, enabling to expand/modify the set later. The stylesheet that comes with it is very similar to what Font-Awesome provides.

[4] http://fontello.com/

[lblanchard]

The last I saw, I don't think fontello allows users to upload their own icons into the font, unfortunately.

[rdopieralski]
I packaged Font Awesome for our use here https://pypi.python.org/pypi/XStatic-Font-Awesome and requested addition to global requirements here: https://review.openstack.org/#/c/115211/

Gerrit topic: https://review.openstack.org/#q,topic:bp/font-icons,n,z

Addressed by: https://review.openstack.org/115217
    Add Font Awesome icons

(?)

Work Items

Work items:
Get the icon-font library: DONE
Link it correctly to the project: DONE

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.