Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Icon-Fonts einbinden funktioniert nicht?!“

E

Einglassekt

Guest

Hallo! Ich bin hier ganz neu, falls ich also irgendwas falsch mach, mich bitte drauf hinweisen :D

Und zwar hab ich folgendes Problem...ich versuche in mein kleines Projekt Icons aus "weloveiconfonts" einzubinden. Die Icons sollen im Menü die späteren Buttons darstellen. Jetzt mach ich alles nach Anleitung (in einer externen Datei funktioniert es auch) und man sollte meinen dass es ganz leicht ist aber in meiner Testseite kriege ichs einfach nicht hin und ich weiß nicht woran es liegt!
HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Testseite</title>
        <link href="stylesheet.css" rel="stylesheet" type="text/css">
    </head>
    <body>

        <header>
            <div>
                <h1>Testseite</h1>
            </div>
        </header>
        <nav>
            <ul>
                <li><a href="#"><span class="entypo-info"></span></a></li>
                <li><a href="#">sights</a></li>
                <li><a href="#">food&amp;beer</a></li>
                <li><a href="#">sports&amp;leisure</a></li>
                <li><a href="#">events</a></li>
                <li><a href="#">map</a></li>
            </ul>
        </nav>

        <footer>
        Blablabla keine Ahnung was auch immer.
        </footer>
    </body>
  
</html>

[CODE]

@font-face {
    font-family: 'Aaargh';
    src:    url('/fonts/Aaargh.ttf') format('truetype')
}

@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome|maki|typicons);



body {
   
    background-color: #8C7F77;
    font-family: 'Aaargh';
   
}

header {
    background-color: #594D42;
    padding: 1px;
}

header h1 {
    font-family: 'Zapfino';
    font-size: 17px;
    text-align: center;
    color: #FFF5EC;
    margin: 4px;

}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    float:left;
    background-color: #C9DBB6;
    border-color: grey;
    width: 80px;
    height: 80px;
    margin: 0;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
    padding:20px;
    margin:30px;
    border: 2px solid #FFF5EC;
   
}
li a {
  color:#FFF5EC;
  text-decoration:none;
  display:block;
  text-align: center;
}

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}


/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* maki */
[class*="maki-"]:before {
  font-family: 'maki', sans-serif;
}

/* typicons */
[class*="typicons-"]:before {
  font-family: 'Typicons', sans-serif;
}
[/CODE]

Ich hab jetzt ein Icon versucht in das erste <li> einzusetzen, aber es zeigt nichts an, weiß jemand vielleicht was ich falsch mache?

Vielen vielen lieben Dank!
Daria
 

E

Einglassekt

Guest

Ok, ich weiß jetzt warums nicht ging... wenn ich erst @import url und anschließend das @font-face in der Reihenfolge ins css schreibe, gehts. Hat sich also erledigt, trotzdem danke! :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.850
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben