Opened 11 years ago

Closed 9 years ago

Last modified 9 years ago

#20597 closed Cleanup/optimization (fixed)

Replace admin icons images by inline SVG

Reported by: loic84 Owned by: anonymous
Component: contrib.admin Version: dev
Severity: Normal Keywords: 1.9
Cc: Idan Gazit, riccardo.magliocchetti@… Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: yes
Easy pickings: no UI/UX: yes

Description

Some of the benefits of using an icon font:

  • Resolution independence: works well on Retina displays.
  • Can be customized by CSS: color, opacity, shadow, etc.
  • Most icon fonts offer a large collection of commonly used icons - while remaining small in file size - covering possible future needs.
  • Widespread browser support, including IE7 support.

I'd like to suggest Font-Awesome which is actively maintained, currently offers 361 icons and whose license is compatible with BSD.

A quick glance at the img assets of django.contrib.admin showed that most if not all icons have an equivalent in Font-Awesome.

Note: This issue was discussed on IRC with Idan and follows previous discussion on #19900.

Change History (22)

comment:1 by Aymeric Augustin, 11 years ago

Triage Stage: UnreviewedAccepted

comment:2 by loic84, 11 years ago

https://github.com/loic/django/compare/ticket20597

Proof of concept that replaces the following:

  • add/change icons for each model on index.
  • add/change/delete icon on the recent items widget on index.
  • delete link icon on change_view.
  • yes/no/unknown images on boolean fields.

I committed a sample project to make it easy to review: just syncdb, runserver then head to /admin/.

comment:3 by Einar Johannsson <hey@…>, 11 years ago

Owner: changed from nobody to anonymous
Status: newassigned

comment:4 by Tim Graham, 11 years ago

Sample project looks good to me. I guess this approach supersedes #16216?

comment:5 by Collin Anderson, 9 years ago

UI/UX: set

correct me if UX/UI is not proper here.

comment:6 by Stephen Kerr, 9 years ago

Should you not use the more up to date Font Awesome?

http://fortawesome.github.io/Font-Awesome/icons/

Last edited 9 years ago by Stephen Kerr (previous) (diff)

comment:7 by Collin Anderson, 9 years ago

I also wonder if at some point we'll want to switch to svg. Though, we would need to drop IE8 first.

comment:8 by Collin Anderson, 9 years ago

More on fonts vs SVG https://css-tricks.com/icon-fonts-vs-svg/. I think we should hold out until we can simply switch to SVG.

comment:9 by Tim Graham, 9 years ago

If I read it correctly, IE8 support ends Jan. 12, 2016 so Django 1.10 or later should be a good candidate.

Last edited 9 years ago by Tim Graham (previous) (diff)

comment:10 by rm_, 9 years ago

Cc: riccardo.magliocchetti@… added

comment:11 by Tim Graham, 9 years ago

Summary: Replace admin icons images by an icon font.Replace admin icons images by inline SVG

Me on django-developers: "Now that Django 1.9 is slated for December and IE8 support ends the next month, I think it might be acceptable to drop IE8 support in 1.9 and go with the SVG solution now."

comment:12 by elky, 9 years ago

Despite all advantages of inline SVG it is pretty complex solution to implement and support in Django admin.

  1. SVG is pretty big to insert in markup (include tag for each icon as a solution?)
  2. We can use simple <img> with SVG as a source but this approach is weak - we can't change SVG color in this case. So we'll have to serve already colorized SVG files (not flexible solution). There is JS solution to replace img with inline SVG but I'm not really sure that it's good practice.
  3. There are many places where icons render in JS (widgets) - I don't see any not ugly solution to add inline SVG into it. Using div element with SVG as a background is a weak solution too - no way to colorize it (CSS3 mask has poor browser support)
  4. 20+ additional server requests
  5. Support. Contributors will have to add (and draw?) new icons manually which brakes development process.

I vote for font icons (like Font Awesome). See discussion in django-developers.

comment:13 by Tim Graham, 9 years ago

If we lack other expert opinions (I am not one), I don't object to your reasoning.

comment:14 by Marc Tamlyn, 9 years ago

This isn't a clear cut argument either way at the moment. Icon fonts are simpler to use in many cases, they can easily be coloured etc. Inline SVG I agree is not worth the extra work most of the time - unless you are wanting to change the SVG content a background is much easier and can be achieved with similar CSS.

SVG definitely wins on accessibility, which is something we need to consider, but I'm also happy with "working code".

comment:15 by Collin Anderson, 9 years ago

We could instead just swap out our .gifs with .svg and not touch the markup much if at all (not inline the svg, leave them as img tags). That could be an even simpler situation than using fonts. It should be the same number of requests that we currently have (rather than a reduced number of requests).

Otherwise, I'm fine with fonts. I just wanted to make sure we looked into the SVG option before switching to fonts. The bonus is that we can keep IE8 support at little longer.

Last edited 9 years ago by Collin Anderson (previous) (diff)

comment:16 by elky, 9 years ago

Well, only week ago I was 100% happy with font icons. But after Collin's comment I vote for SVG (<img> with svg as a source).
Below I listed advantages/disadvantages for both options.

Font

SVG

And the final and main argument to choose SVG is that some apps use a bit overridden Django CSS classes so font approach may cause visual issues (I checked it with few CMS apps). So font approach is an extra headache for app developers.

comment:17 by Tim Graham, 9 years ago

Keywords: 1.9 added

comment:18 by Hugo Osvaldo Barrera, 9 years ago

I mentioned this on the list, but don't see this mentioned here: Where do font-icons stand in terms of accessibility? Do we have something similar to the alt attribute?

comment:19 by Tim Graham, 9 years ago

Has patch: set
Patch needs improvement: set

We are going with the inline SVG solution so we can use alt.

PR (with some todos remaining).

comment:20 by elky, 9 years ago

We cannot use alt for elements where image used as background. Actually Django had accessibility problems before SVG implementation -- there are only few places where alt attribute available.

I think we need separate ticket to implement accessibility support.

comment:21 by Tim Graham <timograham@…>, 9 years ago

Resolution: fixed
Status: assignedclosed

In c32b61c6:

Fixed #20597 -- Replaced admin GIF/PNG icons by SVG

comment:22 by Tim Graham <timograham@…>, 9 years ago

In 22a791e:

Refs #20597 -- Fixed spelling of HiDPI.

Note: See TracTickets for help on using tickets.
Back to Top