CSS Icons

Entdecke, wie du mit einer Vielzahl von Icons deine HTML-Seiten zum Leben erwecken kannst. Tauche ein in die Welt der Icon-Bibliotheken und gestalte deine Webprojekte noch ansprechender.

Icons können einfach zu deiner HTML-Seite hinzugefügt werden, indem du eine Icon-Bibliothek verwendest.

Wie man Icons hinzufügt

Der einfachste Weg, ein Icon zu deiner HTML-Seite hinzuzufügen, ist mit einer Icon-Bibliothek wie Font Awesome. Füge den Namen der angegebenen Icon-Klasse zu einem beliebigen Inline-HTML-Element hinzu (z. B. <i> oder <span>). Alle Icons in den unten aufgeführten Icon-Bibliotheken sind skalierbare Vektoren, die mit CSS angepasst werden können (Größe, Farbe, Schatten usw.).

Font Awesome Icons

Um die Font Awesome Icons zu verwenden, gehe zu fontawesome.com, melde dich an und erhalte einen Code, den du im <head>-Bereich deiner HTML-Seite hinzufügen kannst. Oder von der Seite https://cdnjs.com/libraries/font-awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Hinweis: Es ist kein Herunterladen oder Installieren erforderlich!

// index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Icons</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="assets/styles.css" />
  </head>
  <body>
    <main class="content">
      <i class="fas fa-cloud"></i>
      <i class="fas fa-heart"></i>
      <i class="fas fa-car"></i>
      <i class="fas fa-file"></i>
      <i class="fas fa-bars"></i>
    </main>
  </body>
</html>

Und die css Datei:

// assets/styles.css

body {
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: slategray;
  color: white;
}

i {
  padding-right: 1rem;
  font-size: 2rem;
}

Result:

Ein icon in der css Datei aufrufen wichtig sind font-family: "Font Awesome 6 Free" und font-size: 900. Hier ein Beispiel die Suche mit einer Lupe. Erst die html.

// index.html

<main class="content">
      <div class="row">
        <label for="search">Suche:</label>
        <input type="search" name="search" id="search" />
      </div>
      <div>
        <i class="fas fa-cloud"></i>
        <i class="fas fa-heart"></i>
        <i class="fas fa-car"></i>
        <i class="fas fa-file"></i>
        <i class="fas fa-bars"></i>
      </div>
    </main>

Und die passende css:

// assets/styles.css

.row {
  display: flex;
  width: 100vw;
  height: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

input[type="search"] {
  border: none;
  outline: none;
  width: 10rem;
  margin-left: 1rem;
  padding: 0.5rem;
  padding-left: 2rem;
  position: relative;
}

label::after {
  content: "\f002";
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-weight: 900;
  color: black;
  position: relative;
  transform: translateX(2.5rem);
  z-index: 10;
}

Ergibt:

Bootstrap Icons

Um die Bootstrap-Glyphicons zu verwenden, fügen Sie die folgende Zeile innerhalb des <head>-Bereichs Ihrer HTML-Seite hinzu:

Hinweis: Es ist kein Herunterladen oder Installieren erforderlich!

// index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Icons</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
    <link rel="stylesheet" href="assets/styles.css" />
  </head>
  <body>
    <main class="content">
      <div class="row">
        <label for="search">Suche:</label>
        <input type="search" name="search" id="search" />
      </div>
      <div>
        <i class="bi bi-airplane"></i>
        <i class="bi bi-asterisk"></i>
        <i class="bi bi-balloon-heart-fill"></i>
        <i class="bi bi-brightness-high"></i>
        <i class="bi bi-bus-front-fill"></i>
      </div>
    </main>
  </body>
</html>

Und die css Datei:

// assets/styles.css

body {
  margin: 0;
  padding: 0;
  background-color: slategray;
  color: white;
}

.content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  height: 100vh;
  width: 100vw;
}

i {
  padding-right: 1rem;
  font-size: 2rem;
}

.row {
  display: flex;
  width: 100vw;
  height: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

input[type="search"] {
  border: none;
  outline: none;
  width: 10rem;
  margin-left: 1rem;
  padding: 0.5rem;
  padding-left: 2rem;
  position: relative;
}

Ein icon in der css Datei aufrufen wichtig auch hier ist font-family: "bootstrap-icons". Hier ein Beispiel die Suche mit einer Lupe.

// assets/styles.css

label::after {
  content: "\F52A";
  font-family: "bootstrap-icons";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  color: black;
  position: relative;
  transform: translateX(2.5rem);
  z-index: 10;
}

Google Icons

Um die Google-Icons zu verwenden, fügen Sie die folgende Zeile innerhalb des <head>-Bereichs Ihrer HTML-Seite hinzu:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Hinweis: Es ist kein Herunterladen oder Installieren erforderlich!

// index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Icons</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    />
    <link rel="stylesheet" href="assets/styles.css" />
  </head>
  <body>
    <main class="content">
      <div class="row">
        <label for="search">Suche:</label>
        <input type="search" name="search" id="search" />
      </div>
      <div>
        <i class="material-symbols-outlined"> wb_incandescent </i>
        <i class="material-symbols-outlined"> star_rate </i>
        <i class="material-symbols-outlined"> battery_charging_80 </i>
        <i class="material-symbols-outlined"> flare </i>
        <i class="material-symbols-outlined"> apps </i>
      </div>
    </main>
  </body>
</html>

Und die css Datei:

// assets/styles.css

body {
  margin: 0;
  padding: 0;
  background-color: slategray;
  color: white;
}

.content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  height: 100vh;
  width: 100vw;
}

i {
  padding-right: 1rem;
  font-size: 2rem;
}

.row {
  display: flex;
  width: 100vw;
  height: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

input[type="search"] {
  border: none;
  outline: none;
  width: 10rem;
  margin-left: 1rem;
  padding: 0.5rem;
  padding-left: 2rem;
  position: relative;
}

Ein icon in der css Datei aufrufen wichtig auch hier ist font-family: "Material Symbols Outlined". Hier ein Beispiel die Suche mit einer Lupe.

// assets/styles.css

label::after {
  content: "\e8b6";
  font-family: "Material Symbols Outlined";
  font-size: 1.25rem;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  color: black;
  position: relative;
  transform: translateX(2.5rem);
  z-index: 10;
}

Meld dich an und schreibe ein Kommentar