Icons are a simple and effective way to draw users into the content of your website. They can help you structure content and separate different sections of the page. The primary goal of using icons should be to help the user find information on the page.
Icons
With icons you can quickly sum up what your text is about. Use an icon that encapsulates the point you are trying to get across in your paragraph. This will make the text more accessible to your readers.
Create an icon
example of a simple icon
You can place icons just about anywhere using simple markup. We are going to use an inline HTML element such as <span> and add appropriate classes to it. These are required classes: ic and the icon's name prefixed with ic-, for example ic-star. Here's an example of the code which will add a star icon:
<span class="ic ic-star"></span> example of a simple icon
If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.
Icon size
ic-lg
ic-2x
ic-3x
ic-4x
To increase icon size relative to the font-size of the icon's container, use the following classes: ic-lg (increases the size of the icon by 33%), ic-2x, ic-3x, ic-4x, ic-5x, ic-6x, ic-7x or ic-8x.
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
Inline styles
Now you can start having more fun with icons. By default all icons have the same color as text, but if you want to change the color of selected icon, you can do it with inline CSS styles. Add the style attribute to the icon element and specify the color.
You can add inline styles to icons the same way as to any other HTML elements in a HTML document. The style attribute can contain any CSS property, such as color, font-size, text-shadow etc.
To display an icon inside a box with background color (we call it an iconbox), add the ib class to the icon element. With the optional class ib-hover, the color of the iconbox will change on mouse hover over the iconbox.
Background color will be automatically added to the icon element. Make sure to leave the <span> tag empty – otherwise the contents of the tag will be displayed together with the icon and any additional space can dislocate the icon.
<span class="ic ic-star ib ib-hover"></span> example of an iconbox
The default background color and color of the icon can be configured in the admin panel: Theme Design > Colors > Iconbox
Iconbox size
To increase iconbox size, use the following classes: ib-size-l, ib-size-xl, ib-size-xxl, ib-size-xxxl.
The icon size is independent of the iconbox size and can be increased with classes which were described earlier. For example, add class ic-lg to make the icon a little bit bigger.
To add eye-catching hover effects to the iconbox, use one of the following combinations of classes. Note that in each case the combination consists of two classes:
Icons can help you structure content and separate different sections of the page. The primary goal of using icons should be to help the user find information on the page and with icons you can quickly sum up what your text is about. For example, when you build lists, instead of using standard bullets, you can use icons to draw attention to paragraphs and other blocks of content.
Simple block with icon
Heading Example
This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks. Icons are an effective way to...
To create a simple block of text with an icon, wrap your text inside a <div> element with the feature class. Here's a minimal example:
<div class="feature">
<span class="left ic ic-star ic-2x" style="color: #5bd2ec;"></span>
<h4>Heading Example</h4>
<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks. Icons are an effective way to...</p>
</div>
If you add left or right class to the icon, the icon will be taken from the normal flow and placed along the left or right side of its container, and text will wrap around it.
Indented block
Heading Example
This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.
To display a block with indentation on the left side, add the indent class to the block element:
To increase the size of the indentation, use the following classes together with the indent class: indent-size-l, indent-size-xl, indent-size-xxl, indent-size-xxxl.
<div class="feature feature-icon-hover indent">
<span class="left ic ic-star ic-2x" style="color: #de2666;"></span>
<h4>Heading Example</h4>
<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
</div>
Block with iconbox and hover effect
Heading Example
This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.
To change the background color of the iconbox on mouse hover over the entire block, add the feature-icon-hover class to the block element.
If you increase the iconbox size (by adding a class such as ib-size-xl), you will also need to add corresponding class (in this case: indent-size-xl) to the block element. It will adjust the size of the indentation.
<div class="feature feature-icon-hover indent indent-size-xl">
<span class="left ic ic-star ic-lg ib ib-size-xl"></span>
<h4>Heading Example</h4>
<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
</div>
The default background color and color of the icon can be configured in the admin panel: Theme Design > Colors > Iconbox
More complex example
Above heading
Heading Example
Text below heading
This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.
1
Lorem ipsum dolor sit, consectetur adipiscing elit.
2
Lid est laborum et dolorum fuga et harum quidem.
3
Seq et perspser iciatis unde omnis iste nautis.
Example of another text paragraph inside a block. Icons are an effective way to draw users into the content of your store.
Here's another, more complex example with additional headings and nested blocks. To change the background color of the iconbox you can use inline styles. Add the style attribute to the iconbox element and specify the background color.
<div class="feature indent indent-size-xl">
<span class="left ic ic-home ic-lg ib ib-size-xl" style="background-color: #ffb13e;"></span>
<h6 class="above-heading">Above heading</h6>
<h4>Heading Example</h4>
<h6 class="below-heading">Text below heading</h6>
<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
<div class="feature feature-icon-hover indent">
<span class="ic ic-char ib">1</span>
<p>Lorem ipsum dolor sit, consectetur adipiscing elit.</p>
</div>
<div class="feature feature-icon-hover indent">
<span class="ic ic-char ib">2</span>
<p>Lid est laborum et dolorum fuga et harum quidem.</p>
</div>
<div class="feature feature-icon-hover indent">
<span class="ic ic-char ib">3</span>
<p>Seq et perspser iciatis unde omnis iste nautis.</p>
</div>
<p>Example of another text paragraph inside a block. Icons are an effective way to draw users into the content of your store.</p>
<a href="#">Read more...</a>
</div>
Centered block
Heading Example
This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.
To align elements of the block to the center, use the centered class.
<div class="feature centered">
<span class="ic ic-lightbulb ic-2x ib ib-size-xl" style="background-color: #bf78dd;"></span>
<h4>Heading Example</h4>
<p>This is a paragraph of sample text. Using this markup you can quickly build all kinds of blocks.</p>
</div>
Font Awesome icons
Font Awesome is a font and icon toolkit based on CSS. It offers a collection of more than 600 vector icons which can be easily customized (the same as other font icons available in the theme).
Basic Font Awesome icons
Use the fa class and the icon's name with an inline HTML element span. Here's an example of the code which will create a flag icon:
This is a short paragraph of sample text inside a block.
You can use Font Awesome icons together with other icon classes described in this document. Here's an example of an iconbox element (the ib class) with Font Awesome icon inside a block
<div class="feature feature-icon-hover indent indent-size-l">
<span class="ic ic-2x ib ib-size-l left fa fa-flag" style="background-color: #71d1b3;"></span>
<h4>Heading Example</h4>
<p>This is a short paragraph of sample text inside a block.</p>
</div>
Examples of block with icon
Unlimited Colors
You have never seen so many options! Change colors of dozens of elements, apply textures, upload background images...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur quidquid latine dictum sit etiam neque velit, blandit sed scelerisque solare de equis...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur quidquid latine dictum sit etiam neque velit, blandit sed scelerisque solare de equis...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur quidquid latine dictum sit etiam neque velit, blandit sed scelerisque solare de equis...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur quidquid latine dictum sit etiam neque velit, blandit sed scelerisque solare de equis...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus. Lorem ipsum dolor sit consectetur...
Block with headings, iconboxes and nested paragraphs
The Secondary Heading
Feature Title Example
Text below heading
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Sinlgle line of text, short paragraph.
1
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis, nullam ornare.
2
Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio nam libero eligendi.
3
Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste dolores sadips.
4
Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, nobis est optio cumque
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
The Secondary Heading
Feature Title Example
Text below heading
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Sinlgle line of text, short paragraph.
1
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis, nullam ornare.
2
Lid est laborum et dolorum fuga. Et harum quidem rerum facilis est et expeditasi distinctio nam libero eligendi.
3
Sed ut perspser iciatis unde omnis iste natus error sit voluptatem accusantium doloremque laste dolores sadips.
4
Et harum quidem rerum facilis est et expeditasi distinctio. Nam libero tempore, nobis est optio cumque
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Blocks - separated with border
The Secondary Heading
Feature Title Example
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis. Nullam ornare enim nec justo bibendum lobortis. In eget metus. Lorem ipsum dolor sit consectetur, adipiscing elit
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...
Lorem ipsum dolor sit, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque solare de equis. Nullam ornare enim nec justo biben lobortis. In eget metus...
Diese Seite verwendet Cookies, die die Nutzung dieser Website für Sie angenehmer machen. Wenn Sie diese Website weiterhin besuchen, stimmen Sie der Nutzung von Cookies gemäß unseren Datenschutzbestimmungen zu. Für weitere Informationen klicken Sie bitte: Mehr erfahren.
Wenn du eine Website besuchst, kann sie Informationen aus deinem Browser, meist in Form von Cookies, abrufen oder speichern. Hierbei kann es sich um Informationen über dich, deine Einstellungen oder dein Gerät handeln. Meist werden sie verwendet, um die erwartungsgemäße Funktion der Website zu gewährleisten. In der Regel identifizieren diese Informationen dich nicht direkt. Sie können dir aber ein personalisierteres Web-Erlebnis bieten. Du kannst dich entscheiden, bestimmte Arten von Cookies nicht zulassen. Klicke auf die verschiedenen Kategorieüberschriften, um mehr zu erfahren und unsere Standardeinstellungen zu ändern. Wie du mit Sicherheit weißt, kann die Blockierung bestimmter Arten von Cookies jedoch zu einer beeinträchtigten Erfahrung der von uns zur Verfügung gestellten Website und Dienste führen.
Essenzielle System Cookies
Diese Cookies sind zur Funktion unseres Onlineshops erforderlich und können in unseren Systemen nicht deaktiviert werden. In der Regel werden diese Cookies nur als Reaktion auf von deinen getätigten Aktionen gesetzt, die einer Dienstanforderung entsprechen, wie etwa dem Festlegen deiner Datenschutzeinstellungen, dem Anmelden oder dem Ausfüllen von Formularen. Du kannst deinen Browser so einstellen, dass du diese Cookies blockiert oder du über diese Cookies benachrichtigt werden. Einige Bereiche des Onlineshops funktionieren dann aber möglicherweise nicht.
Preserves the destination page the customer was loading before being directed to log in. Used in mini cart for logged in customers if the Display Shopping Cart Sidebar configuration option is set to Yes.
Tracks error messages and other notifications that are shown to the user, such as the cookie consent message, and various error messages. The message is deleted from the cookie after it is shown to the shopper.
The value of this cookie triggers the cleanup of local cache storage. When the cookie is removed by the backend application, the Admin cleans up local storage, and sets the cookie value to true.
Appends a random, unique number and time to pages with customer content to prevent them from being cached on the server. It is set in multiple places: in PHP, in JavaScript as a cookie, and in JavaScript to local storage. For the HTTP Only Yes (based on request) means that the cookie Secure if set during HTTPS request and unsecure if set during HTTP request.
Stores translated content when requested by the shopper. Used when Translation Strategy is configured as 'Dictionary (Translation on Storefront side)'.
Forces local storage of specific content sections that should be invalidated.
Cookie Name
mage-cache-storage-section-invalidation
Speicherdauer
1 Day
Session Id
Name
Session Id
Anbieter
Magento
Zweck
Stores an anonymous session ID to associate multiple requests from a user of the same HTTP session.
Cookie Name
PHPSESSID
Speicherdauer
Session
User Allowed Save Cookie
Name
User Allowed Save Cookie
Anbieter
Magento
Zweck
Saves whether the user accepts cookies.
Cookie Name
user_allowed_save_cookie
Speicherdauer
1 year
Marketing
Mit diesen Cookies können wir Besuche zählen und Zugriffsquellen eruieren, um die Leistung unseres Onlineshops zu ermitteln und zu verbessern. Sie unterstützen uns bei der Beantwortung der Frage, welche Seiten am beliebtesten sind, welche am wenigsten genutzt werden und wie sich Besucher auf dem Onlineshop bewegen. Alle von diesen Cookies erfassten Informationen werden aggregiert und sind deshalb anonym. Wenn du diese Cookies nicht zulässt, können wir nicht wissen, wann du unseren Onlineshop besucht hast.
Google Analytics (Tag Manager)
Name
Google Analytics (Tag Manager)
Anbieter
Google ANalytics
Datenschutzerklärung
https://policies.google.com/privacy?hl=de
Zweck
Diese Liste enthält alle (persönlichen) Daten, die von oder durch die Nutzung dieses Dienstes gesammelt werden.
- Anzeigenansichten
- IP-Adresse
- Daten zur Benutzerinteraktion
- Besuchte Seiten
- Browser-Informationen
- Suchverlauf
- Cookie-ID
- Betrachtete Seiten
Speicherdauer
Die Daten werden gelöscht, sobald sie nicht mehr für die Verarbeitungszwecke benötigt werden.