Icon Element

Decorating your content.

Overview

Mame includes around 100 optimized icons for different usages. Icons may serve as lightweight alternative to images.

P.S.: You can insert icons  into formatted text directly, without using the element using the Icon element.

Usage Examples

  • Decorating text.
  • Getting attention.
  • Lightweight alternative to images.

Icon Properties

  1. Icon: Choose an icon from the list.
  2. Size: Set the size of the icon. 
  3. Color: Color of the icon, choose between your site's colors (default is primary) or choose a custom color.
  4. Link Type: Add an optional link to the icon.
Everything else is configured in the common general properties.
Icon Properties Description

See it in action (Three icons on a Grid)

Interactions and Accessibility

Your Icons should have a title for accessibility. 

Generated HTML


<div class="mame-element mame-icon">
   <div class="icon icon-paperplane primary" title="Icon Title" aria..></div>
</details>

Style / CSS Selectors


.mame-icon {
  /* All icon elements */
}

.mame-icon .icon {
  /* The actual icons */
} 

JavaScript

Icons are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

Was this article helpful?

Newsletter

You can unsubscribe at any time. For information about our privacy practices, please check the privacy policy.
Made with ❤ and Mame in the European Union.
Copyright (C) 2019 - 2021 mame.app. All Rights reserved.