gitlabhq/gitlabhq — pull request #7959 by Soullivaneuh (2014-10-04 10:57:46+00:00)
Title: [WIP][Need feedback] Improve file icons rendering on tree

TODO list:

- [ ] Make decision about icons choose and methods
- [ ] Integrate new icons to tree index view
- [ ] Integrate new icons to tree file show view
- [ ] Write some test about the different icon rendering

Referred to [this request](http://feedback.gitlab.com/forums/176466-general/suggestions/6330830-use-different-icon-for-executable-files), I did some improvements to file icons rendering.

This mean:

* Use [fa-fw](http://fortawesome.github.io/Font-Awesome/examples/#fixed-width) (fixed width) class for homogeneous column sizes
* [fa-file-text-o](http://fortawesome.github.io/Font-Awesome/icon/file-text-o/) for regular files.
* [fa-share](http://fortawesome.github.io/Font-Awesome/icon/share/) icon for links.
* [fa-file-code-o](http://fortawesome.github.io/Font-Awesome/icon/file-code-o/) icon for executable files.

So, from the actual design:
![gitlab_icons_before](https://cloud.githubusercontent.com/assets/1698357/4515246/9511a41c-4bb2-11e4-875f-4eb08e64a409.jpg)

I made this:
![gitlab_icons_after](https://cloud.githubusercontent.com/assets/1698357/4515247/9ac62482-4bb2-11e4-8459-ae350e0575bb.jpg)

The share link sounds good for me, but I don't really like the file-code for binary, to tiny to differentiate and note really appropriate...

So I tried with [fa-terminal](http://fortawesome.github.io/Font-Awesome/icon/terminal/):
![gitlab_icons_terminal](https://cloud.githubusercontent.com/assets/1698357/4515253/ecea30a0-4bb2-11e4-97ce-120190f3d6a4.jpg)

Well, not really better. So what about [fa-cog](http://fortawesome.github.io/Font-Awesome/icon/cog/) ?
![gitlab_icons_cog](https://cloud.githubusercontent.com/assets/1698357/4515258/0c50baf4-4bb3-11e4-9e13-3c775aaf859b.jpg)

In my opinion, I think fa-cog is the better rendering for binaries. But, well, doesn't really look like a file...

Two possibles options:

* Use fa-stack method for custom file icon as explained [here](http://blog.fontawesome.io/2014/09/25/custom-file-types-with-stacked-icons/), but I have to change the template code for this and this will force you to use file-icon in any way.
* Integrate [Github octicons](https://octicons.github.com/) which has [binary](https://octicons.github.com/icon/file-binary/) and [symlink](https://octicons.github.com/icon/file-symlink-file/) icons.

If we choose the second option, I have to check before if Octicons and Font Awesome libraries can work together without any conflict. Furthermore, I think we will have to add some contributing rules indicate that the FA icons must be user in priority!

I need your feedback to continue this work. If you have another ideas/solutions, please tell me more! :+1:
Tell me if you think I forgot something on the todo list. :wink:

Waiting yours reviews.