Accessibility Tools

  • Content scaling 100%
  • Font size 100%
  • Line height 100%
  • Letter spacing 100%

msg.Webbaukasten

Icons

msg.WebKit

Icons

Icons are small, and usually symbolic, images and also serve as a visual guide. They direct the visitor to the desired content and thus serve as a basic tool for orientation. They can also help visitors navigate through the site when created as links and can forward visitors to other subsites. They are easy to recognize, easy to understand and enhance the design of the site. They are often used in combination with a hover effect, meaning the icons change when moused over. In this case, the text, color or content can change. Photo icons with text below them are also an option.

Cheatsheet Font Awesome

Icons with text hover

Banking
Lorem Ipsum
Lorem Ipsum
Insurance
Lorem Ipsum
Lorem Ipsum
Utilities
Lorem Ipsum
Lorem Ipsum

Icons with text and text hover

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Lorem
Ipsum

Lorem
Ipsum
Lorem
Ipsum
Lorem
Ipsum

Lorem Ipsum

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Lorem Ipsum

Icons, colored with hover effect

Icons without hover effect, with text

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Photo icons with text

Shutterstock 161265062 200x200

Insurance

Shutterstock 99130316 200x200

Lorem Ipsum


Shutterstock 325951172 200x200

Lorem Ipsum


Text with Icon hover

Lorem ipsum
Banking
Lorem ipsum
Lorem Ipsum
Insurance
Lorem Ipsum
Lorem Ipsum
Utilities
Lorem Ipsum