What Glyphicons are included?

413
2
Jump to solution
03-12-2019 10:51 AM
deleted-user-Bkz8cHvtt5bs
New Contributor III

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?

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

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:

<svg xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; fill: blue" aria-label="rss" viewBox="0 0 24 24"><path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z"/></svg>

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

2 Replies
KlaraSchmitt
Esri Contributor

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:

<svg xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; fill: blue" aria-label="rss" viewBox="0 0 24 24"><path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z"/></svg>

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
New Contributor III

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

0 Kudos