Styling the same responsive icons

HTML & CSS
1

I try to set the same styling for all responsive icons like:

a.modal-box [class*=" icon-accessibility-"] {
 font-size: 3em;
 line-height: 48px;
}

There are many accessibility icons like: icon-accessibility-phone, icon-accessibility-mail, icon-accessibility-chat.

Which code is the correct as it will not be detected the current code for phone, mail, chat…

a.modal-box [class*=" icon-accessibility-"] {
2

Unless the icon class is ALWAYS included with another class, and NEVER first, you need to remove the space in the class selector

a.modal-box [class*="icon-accessibility-"] {
 font-size: 3em;
 line-height: 48px;
}

Just another note - if you’re setting font-size using relative amounts, you should set line height with relative amounts as well, or you run the risk of cutting off the icons.

a.modal-box [class*="icon-accessibility-"] {
 font-size: 3em;
 line-height: 4em;
}
1 Like
3

Thank you for you for all support and notice.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.