Icon in der Navigation

html.de-Forum HTML, XHTML & CSS
1

Hey Leute… ich bin neu hier aber ich wollte mal Fragen wie ich es hinbekomme das z.B links neben dem Punkt „Home“
ein Icon platziert wird. Ich habe es zwar hingekriegt das ein Icon erscheint aber nicht daneben. :frowning:
Könnt ihr mir helfen? :frowning:

index.html:

<head>

    <title> Simolina </title>
    <link rel="stylesheet" href="css/style.css" />

</head>

<body>

<div id="header">
Simolina
</div>

<nav>
    <li><a href="index.html">Startseite</a></li>
        <i class="homepng">
        </i>
    <li><a href="news.html">Neuigkeiten</a></li>
</nav>
</body>

style.css:

body {
margin: 0px;
}

#header {
background-color: #013ADF;
width: 100%;
height: 30%;

}

nav {
background-image: url(…/images/nav.png);
padding-top: 10px;
width: 100%;
height: 100px;
list-style-type: none;
text-transform: uppercase;
text-decoration: none;
}

nav ul {

}

nav ul li a {
text-decoration: none;
}

nav a {
text-decoration: none;
float:left;
font-family: Trebuchet MS;
font-weight: bold;
color: #FFF;
padding: 10px;
display: block;
margin-top: 2%;
margin-left: 10%;
}

.homepng:before {
content: url(…/images/Home-50.png);
padding-right: 150px;
}

Ausgabe: http://prntscr.com/83bvgq

2

Machs am besten hiermit o.Ä

http://fortawesome.github.io/Font-Awesome/

3

Die Icons habe ich ja schon… aber wie muss ich das denn in meine Dateien reinschreiben?

4

Kann ich mir kaum vorstellen, das du die Icons von FontAwesome hast, denn du arbeitest oben mit vorgefertigten .PNG-Dateien. Außerdem hast du Klassen definiert, die du garnicht verwendest. Wie soll das denn dann etwas werden…

5

Wow… tut mir leid wenn ich mich seit knapp 2 Tagen mit HTML und CSS auseinandersetze.
Freue mich über die Klasse Motivation von dir. Ich habe die Dateien von einer anderen
Website und hab keine Ahnung von FontAwesome. Ich dachte das man da nur die
Icons herholen kann die ich ja schon habe. Ich möchte eig. einfach nur einen Code
haben, um das Icon vor das „Home“ zu setzen.

6

Hallo

Willst du uns hier veralbern? Was soll der Mist ohne entsprechenden Hinweis den Quelltext in deinem ursprünglichen Beitrag zu ändern und damit nookies Antwort als Unsinn erscheinen zu lassen?

Sowas ist unhöflich und gehört sich nicht.

Überlass’ zudem bitte den Browsern den Zeilenumbruch mitten in Sätzen. Sonst wird der Text für uns nur sehr schwer lesbar.

Gruss

MrMurphy

7

Edit: Hab den Fehler dank nookie geändert.

Hilft mir aber trotzdem nicht weiter

8

Hallo

vor welches Home soll das Icon? Ich kann keinen Punkt „Home“ in deinem Quelltext erkennen.

Meinst du den Menüpunkt „Startseite“?

Gruss

MrMurphy

9

Ja den mein ich. Habe mir jetzt angeguckt wie das mit diesem FontAwesome funktionieren soll.
der Typ im Video hat den CSS ordner in den Ordner mit der index.html gezogen und dann in der
Index.html folgendes hinzugefügt:
danach ist er nach [spoiler]

  • Startseite
  • Neuigkeiten
    • [/spoiler] gegangen und hat dort folgendes hinzugefügt: [spoiler]
  • [B][/B]Startseite
    • [/spoiler]

    Hat bei mir trotzdem nicht funtioniert. :frowning:
    10

    Wenn muss das ganze so aussehen:
    [HTML]

  • Startseite
    • [/HTML]

    Besteht überhaupt ein Ordner „css“ worin die „font-awesome.min.css“ abgelegt ist? Wenn ja dann muss die Pfadangabe auch gültig sein.
    [HTML][/HTML]

    Hinzu kommt das der Ordner „fonts“ mit den entsprechenden Fonts auch vorhanden sein muss.

    Auf der Website findest du einen Menüpunkt der sich „Get started“ nennt.

    11

    Hab den Fehler gefunden. Danke :slight_smile: