• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Icon in der Navigation

J

J0NAS

Neues Mitglied
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. :(
Könnt ihr mir helfen? :(

index.html:
<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>


</html>
___________________________________________________________
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
 
Zuletzt bearbeitet:
Werbung:
Werbung:
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..
 
nookie schrieb:
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..
Zum Vergrößern anklicken....

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.
 
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
 
Werbung:
MrMurphy schrieb:
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
Zum Vergrößern anklicken....

Edit: Hab den Fehler dank nookie geändert.

Hilft mir aber trotzdem nicht weiter
 
Hallo

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

Meinst du den Menüpunkt "Startseite"?

Gruss

MrMurphy
 
MrMurphy schrieb:
Hallo

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

Meinst du den Menüpunkt "Startseite"?

Gruss

MrMurphy
Zum Vergrößern anklicken....
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:
<link rel="stylesheet" href="cssfont-awesome.min.css">
danach ist er nach
<nav>
<li><a href="index.html"></i>Startseite</a></li>
<li><a href="news.html">Neuigkeiten</a></li>
</nav>
gegangen und hat dort folgendes hinzugefügt:
<li><a href="index.html"><i class="fa fa-home">Startseite</a></li>

Hat bei mir trotzdem nicht funtioniert. :(
 
Werbung:
Wenn muss das ganze so aussehen:
HTML: 
<li><a href="index.html"><i class="fa fa-home"></i>Startseite</a></li>

Besteht überhaupt ein Ordner "css" worin die "font-awesome.min.css" abgelegt ist? Wenn ja dann muss die Pfadangabe auch gültig sein.
HTML: 
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">

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.
 
nookie schrieb:
Wenn muss das ganze so aussehen:
HTML: 
<li><a href="index.html"><i class="fa fa-home"></i>Startseite</a></li>

Besteht überhaupt ein Ordner "css" worin die "font-awesome.min.css" abgelegt ist? Wenn ja dann muss die Pfadangabe auch gültig sein.
HTML: 
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">

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.
Zum Vergrößern anklicken....

Hab den Fehler gefunden. Danke :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben