Web UI has a broken settings icon

[slackpad]

I was testing the final 0.6.0 build of the web UI and realized that the settings icon is broken:

It's missing on Chrome:

And it looks super weird on Safari:

Here's how it used to look:

https://www.consul.io/assets/images/consul_web_ui-aeb578f2.png

This has been deployed to the demo cluster if you want to take a look here - http://demo.consul.io/ui/. I don't think this is a show stopper for release since it's easy to update the web UI, but it would be nice to fix soon.

/cc @pearkes @meirish

[meirish]

Hmm, looks like it's not rendering properly because the default font doesn't know how to handle the increased font-weight with the unicode glyph. I'm not sure what it looked like originally but I can certainly take a look at it soon and make it less broken looking. Should be an easy fix.

[slackpad]

Awesome - thanks @meirish!

[slackpad]

What's weird is our internal Consul UI which I haven't updated also looks broken. Maybe some external dependency changed?

[slackpad]

Looks like something happened to the settings icon and it's broken again.

[meirish]

@slackpad where are you seeing this? on demo.consul.io I see the SVG icon in Chrome, but the old icon in Safari - any chance I'm just hitting a server running older ui code in Safari?

[meirish]

OK just refreshed and got the old icon in Chrome too... dunno what's happening here as that code isn't what's in master. https://github.com/hashicorp/consul/blob/master/ui/index.html#L165-L167 vs.

when I inspect the page (the {{link-to}} renders as an <a> tag).

[slackpad]

Ah the demo might be a little behind master as there's a fork that adds the DO logo. If you try the latest build and run consul agent -dev and then visit http://localhost:8500/ui it should repro: