What Glyphicons are included?

deleted-user-Bkz8cHvtt5bs · ‎03-12-2019

I have been tasked with redesigning my organization's OpenData site. I know in the past, I have been able to use some glyphicons. Particularly, I have used the home, the question mark, magnifying glass, etc.

Now I'm looking for the RSS feed icon, but I cannot find the source of the images to see if one is available. Is there documentation somewhere on what glyphs are included with ArcGIS Hub?

KlaraSchmitt · ‎03-12-2019

Hello Chris,

Glyphicons are a type of iconfont and we're actually trying to move away from using glyphicons in our app at all. Iconfonts can be problematic as they inherit font styling, such as line-height, and are more difficult to size consistently. Plus, assistive technologies like screen-readers cannot actually interpret iconfonts correctly and will instead read out the mapped font character. For instance, our search magnifying glass used to give the auditory cue of "j button," which is super non-helpful.

Might I recommend using SVGs? They are vector images so they scale well and you can apply color to them via a fill property. I don't know the context for which you need the image, but you can use the code view of the text card to paste an inline SVG and then apply a style tag to change the color and size. For example, the following would give you a blue RSS icon:

I'd recommend using iconmonstr - Free simple icons for your next project to find some SVGs. They have all the ones you mentioned. If you are using our text card, I'd also recommend you add an aria-label with a description of what the SVG represents. We've found that not all screen-readers respect the <title> tags in an SVG and aria-label is the equivalent of using the alt-text attribute on images. If you use our category card and a url for a .svg file, you might see a prompt for alt-text, but behind the scenes we're doing an aria-label.

View solution in original post

KlaraSchmitt · ‎03-12-2019

Hello Chris,

Glyphicons are a type of iconfont and we're actually trying to move away from using glyphicons in our app at all. Iconfonts can be problematic as they inherit font styling, such as line-height, and are more difficult to size consistently. Plus, assistive technologies like screen-readers cannot actually interpret iconfonts correctly and will instead read out the mapped font character. For instance, our search magnifying glass used to give the auditory cue of "j button," which is super non-helpful.

Might I recommend using SVGs? They are vector images so they scale well and you can apply color to them via a fill property. I don't know the context for which you need the image, but you can use the code view of the text card to paste an inline SVG and then apply a style tag to change the color and size. For example, the following would give you a blue RSS icon:

I'd recommend using iconmonstr - Free simple icons for your next project to find some SVGs. They have all the ones you mentioned. If you are using our text card, I'd also recommend you add an aria-label with a description of what the SVG represents. We've found that not all screen-readers respect the <title> tags in an SVG and aria-label is the equivalent of using the alt-text attribute on images. If you use our category card and a url for a .svg file, you might see a prompt for alt-text, but behind the scenes we're doing an aria-label.

deleted-user-Bkz8cHvtt5bs · ‎03-14-2019

Thanks Klara! This was very helpful. Especially the link to iconmonstr.

ChrisMyers_NewQuest · ‎12-09-2022

Hi Klara - I am just discovering this and it has been very helpful as I am just learning to transition away from glyphs. A few questions:

1) Is this information still relevant? As I mentioned, its been very helpful to me and I want to make sure it's still the best way to do it

2) Specifically, I am trying to incorporate things like drop shadows, strokes, etc. For example below, I tried to use ext-shadow:1px 1px 2px #000000 in my styling for a shadow, but it doesn't seem to work.

Thanks so much!

Chris

KlaraSchmitt · ‎12-12-2022

Hi Chris,

Yes SVGs are currently still relevant. 🙂 However, in order to get a shadow, you're probably going to want to use box-shadow on the SVG object styling. text-shadow would be used specifically on a <text> element within your SVG object and your example only contains a <path> element.