Design Icons

← zurück zum Design Framework

Verantwortlicher: Patrick Puritscher

Beschreibung: Es existieren zwei Arten von Icons. Zum einen die rein in CSS definierten, wie das der Navigation (i__hamburger) oder der beiden Ratings (i__star, i__euro). Zum Anderen wurde auf Basis von SVG-Elementen ein Iconfont erstellt. Die Elemente des Fonts zeichnen sich durch das Präfix i-f__ aus.

Die Icons stammen von der Seite Flaticon und wurden mit Hilfe der IcoMoon App in einen Icon Font umgewandelt.

Betroffene Dateien: index.html, elements.css, fonts.css

Eingebundene Bibliotheken: -

Einzelne Elemente:

• CSS Icons
• Iconfont

---

CSS Icons

HTML

Close

<a class="when__expanded__show i__close"></a>

Hamburger

<span id="trigger-sidebar" class="i__hamburger e__btn">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</span>

Star

<span class="i__star-colored"></span>
<span class="i__star-halfcolored"></span>
<span class="i__star"></span>

Euro

<span class="i__euro-colored"></span>
<span class="i__euro-halfcolored"></span>
<span class="i__euro"></span>

CSS

elements.css

/**
 * Icons
 */

.i__close {
    width: 20px;
    height: 20px;
    background: #e61c1c;
    display: inline-block;
    border-radius: 50%;
    position: relative;
}

.i__close::before {
    width: 11px;
    height: 2px;
    top: 9px;
    left: 4px;
    background: #fff;
    content: ' ';
    position: absolute;
}

.i__euro,
.i__euro-halfcolored,
.i__euro-colored {
    width: 15px;
    height: 15px;
    background: #fff;
    display: inline-block;
    margin: 0 2px;
    position: relative;
    overflow: hidden;
    border-radius: 20%;
}

.i__euro::after,
.i__euro-colored::after,
.i__euro-halfcolored::after {
    position: absolute;
    content: '€';
    color: #ccc;
    font-size: 0.7rem;
    font-weight: 300;
    text-align: center;
    width: 100%;
    line-height: 1.5;
}

.i__euro-colored::after,
.i__euro-halfcolored::after {
    color: #fff;
}

.i__euro-colored::before,
.i__euro-halfcolored::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #1e7111;
}

.i__euro-halfcolored::before {
    width: 60%;
}

.i__star,
.i__star-halfcolored,
.i__star-colored {
    width: 15px;
    height: 15px;
    background: #fff;
    display: inline-block;
    margin: 0 2px;
    position: relative;
    overflow: hidden;
    border-radius: 20%;
    text-align: left;
}

.i__star::after,
.i__star-colored::after,
.i__star-halfcolored::after {
    position: absolute;
    content: '\2605';
    color: #ccc;
    font-size: 0.7rem;
    line-height: 1.4;
    font-weight: 300;
    text-align: center;
    width: 100%;
}

.i__star-colored::after,
.i__star-halfcolored::after {
    color: #fff;
}

.i__star-colored::before,
.i__star-halfcolored::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ddbf5d;
}

.i__star-halfcolored::before {
    width: 60%;
}

.i__hamburger {
    padding: 18px 21px 18px 15px;
}

.i__hamburger > .icon-bar {
    background-color: #ABABAB;
    display: block;
    width: 31px;
    height: 3px;
    border-radius: 1px;
    transition: all .4s ease-out;
}

.i__hamburger > .icon-bar:nth-of-type(2) {
    margin: 4px 0px;
}

.i__hamburger.is__arrow > .icon-bar:nth-last-of-type(2) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.i__hamburger.is__arrow > .icon-bar:first-of-type,
.i__hamburger.is__arrow > .icon-bar:last-of-type {
    width: 20px;
    margin-left: -2px;
}
.i__hamburger.is__arrow > .icon-bar:first-of-type {
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    margin-bottom: -1px;
}
.i__hamburger.is__arrow > .icon-bar:last-of-type {
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
    margin-top: -1px;
}

Iconfont

Bemerkung: Eventuell müssen via CSS Attribute wie Schriftgröße oder Zeilenhöhe angepasst werden.

HTML

<span class="i-f__gohappylogo"></span>
<span class="i-f__trash"></span>
<span class="i-f__reload"></span>
<span class="i-f__reload2"></span>
<span class="i-f__maps"></span>
<span class="i-f__star"></span>
<span class="i-f__download"></span>
<span class="i-f__options"></span>
<span class="i-f__impressum"></span>

CSS

fonts.css

/**
 * Patrick
 * GoHappy-Font einbinden
 */
@font-face
{
    font-family: 'gohappy';
	src:url('../fonts/gohappy.eot?-80aczz');
	src:url('../fonts/gohappy.eot?#iefix-80aczz') format('embedded-opentype'),
		url('../fonts/gohappy.woff?-80aczz') format('woff'),
		url('../fonts/gohappy.ttf?-80aczz') format('truetype'),
		url('../fonts/gohappy.svg?-80aczz#gohappy') format('svg');
	font-weight: normal;
	font-style: normal;
}

elements.css

/** Icons mit Iconfont **/


/**
 * Logo: e600
 * Delete: e601
 * Download: e602
 * Maps: e603
 * Option: e604
 * Reload: e605
 * Reload2: e606
 * Star: e607
 * Impressum: e608
 */

[class*="i-f__"] {
    font-family: 'gohappy';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.i-f__gohappylogo:before {
    content: "\e600";
    font-size: 2rem;
    line-height: 1.9;
    color: #4d4d4d;
}

.i-f__trash.active:before,
.i-f__trash:before {
    content: "\e601";
    font-size: 1.3rem;
    line-height: 2;
    color: #646363;
}

.i-f__reload:before {
    content: "\e605";
    font-size: 1.4rem;
    line-height: 2;
    color: #ABABAB;
}

.i-f__reload2:before {
    content: "\e606";
    font-size: 1.4rem;
    line-height: 2;
    color: #ABABAB;
}

.i-f__maps:before {
    content: "\e603";
    font-size: 1.4rem;
    line-height: 2;
    color: #ABABAB;
}

.i-f__star:before {
    content: "\e607";
    font-size: 1rem;
    line-height: 1;
    color: #c0c0c0;
}

.i-f__download:before {
    content: "\e602";
    font-size: 1rem;
    line-height: 1;
    color: #c0c0c0;
}

.i-f__options:before {
    content: "\e604";
    font-size: 1.4rem;
    line-height: 2;
    color: #c0c0c0;
}

.i-f__impressum:before {
    content: "\e608";
    font-size: 1rem;
    line-height: 1;
    color: #c0c0c0;
}

.i-f-label {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1;
    margin-left: 10px;
    color: #fff;
}