Pattern: Robust icons

I want to share a design pattern I’ve been using for icons. It’s a robust technique that works in almost any situation. With this technique you can use icons inline or append & prepend them to existing content. It works with paragr…


This content originally appeared on MadeByMike and was authored by Mike

I want to share a design pattern I've been using for icons. It's a robust technique that works in almost any situation. With this technique you can use icons inline or append & prepend them to existing content. It works with paragraphs, headings, navigation items, buttons …almost any element.

Examples

View more examples on CodePen.

View Examples

It's also easy to extend so I can usually drop it into almost any project.

Usage

Inline:

<span class="icon icon-{icon-name}"></span>

Prepend:

<div class="icon-left-{icon-name}"></div>

Append:

<div class="icon-right-{icon-name}"></div>

Size modifiers:

<span class="icon icon-{icon-name} icon-small"></span>
<div class="icon-right-{icon-name} icon-large"></div>
<span class="icon icon-{icon-name} icon-responsive"></span>

How it works

When appending or prepending, no matter the hight of the content, the icon will always be centred. Icons are vertically centred using absolutely positioned pseudo elements and left and right padding is added to the parent element as required to ensure icons and content always have adequate spacing.

The clever part of this technique, apart from the vertical centring, is the use of attribute selectors to target elements that that contain various icon- prefixes. By targeting attribute selectors we need fewer class names to apply icon styles and adding new icons or modifiers becomes exceptionally easy.

Extending the icon library

If you follow the naming conventions all you need to add a new icon to the set is a background image. To add a new icon we just need to add following line and change {icon-name} to the name of our new icon.

Check out some demos on CodePen or just grab the code.

.icon-{icon-name},
.icon-left-{icon-name}:before,
.icon-right-{icon-name}:after{
	background-image: url(icon-name.svg);
}

This is the first of hopefully more short articles, where I share some of my favourite design patterns.


This content originally appeared on MadeByMike and was authored by Mike


Print Share Comment Cite Upload Translate Updates
APA

Mike | Sciencx (2015-08-22T00:00:00+00:00) Pattern: Robust icons. Retrieved from https://www.scien.cx/2015/08/22/pattern-robust-icons/

MLA
" » Pattern: Robust icons." Mike | Sciencx - Saturday August 22, 2015, https://www.scien.cx/2015/08/22/pattern-robust-icons/
HARVARD
Mike | Sciencx Saturday August 22, 2015 » Pattern: Robust icons., viewed ,<https://www.scien.cx/2015/08/22/pattern-robust-icons/>
VANCOUVER
Mike | Sciencx - » Pattern: Robust icons. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/08/22/pattern-robust-icons/
CHICAGO
" » Pattern: Robust icons." Mike | Sciencx - Accessed . https://www.scien.cx/2015/08/22/pattern-robust-icons/
IEEE
" » Pattern: Robust icons." Mike | Sciencx [Online]. Available: https://www.scien.cx/2015/08/22/pattern-robust-icons/. [Accessed: ]
rf:citation
» Pattern: Robust icons | Mike | Sciencx | https://www.scien.cx/2015/08/22/pattern-robust-icons/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts