Select to view content in your preferred language

What Glyphicons are included?

1449
4
Jump to solution
03-12-2019 10:51 AM
deleted-user-Bkz8cHvtt5bs
Deactivated User

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 Regular 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

4 Replies
KlaraSchmitt
Esri Regular 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
Deactivated User

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

0 Kudos
ChrisMyers_NewQuest
Regular Contributor

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. 

 

<svg xmlns="http://www.w3.org/2000/svg" style="transform: translate(400px, 20px);width: 24px; height: 24px; fill: #ffcd3a;text-shadow:1px 1px 2px #000000;" 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>

 

Thanks so much! 

Chris 

0 Kudos
KlaraSchmitt
Esri Regular Contributor

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.

0 Kudos