Link in der Navbar?

[sandro22]

Guten abend Zusammen!

Ich versuche schon den halben Tag in der Navbar neben dem Link ein icon einzubinden. Leider erfolg los. Hab auch schon Die Forensuche strapaziert, jedoch erfolglos.

In der index.html habe ich folgendes eingefügt:

Code: PHP  [Auswählen]

<li class="first"><a href="http://hardwaretec.ch/">url("/img/home.gif")Startseite</a></li>

Heraus kommt das da:
[ Für Gäste sind keine Dateianhänge sichtbar ]

Hoffe es kann mir da jemand weiter helfen?

Gruss
Sandro

Linkback: https://www.modified-shop.org/forum/index.php?topic=36643.0

[Q]

Bin jetzt auch nicht der Prof, aber ich würde das klassisch so probieren:

Code: PHP  [Auswählen]

<li class="first"><a href="http://hardwaretec.ch/"><img src="/img/home.gif"> Startseite</a></li>

Die > vor "url" hat die URL des Links erst einmal geschlossen. Danach kommt der "Text" des Links. Wenn dann muss wieder was mit < kommen oder in die <a mit rein. 

[sandro22]

das klappt fürs erste mal. ich nehme an die Position vom icon kann ich in der stylesheet.css vornehmen?

[Q]

Ich bin Netzwerkadmin  Webcoding ist da nicht meine Stärke. Welche Position willst Du denn da ändern? Wenn ich CSS richtig verstanden habe, dann musst du die class irgendwo definieren. In diesem Fall ist das wohl die "li.first" o.ä.

[sandro22]

Ich möchte nur das icon noch ein bischen besser platzieren. das mit der .css hab ich mir gedacht das es unter "li.first" ist.

[sandro22]

Irgendwie klappt das nicht mit der anpassung.
das ist der ausschnit der .css

Code: PHP  [Auswählen]

ul.contentnavigation li.first {
  padding: 0px 10px 0px 10px;

Ich möchte versuche irgendwie dass das icon in der mitte der schrift ist und wen man drüberfährt das icon sich auch grün färbt so wie die schrift. Aber irgendwie stehe ich gerade auf dem Schlauch.

Hoffe hat jemand ein Tipp für mich?

gruss sandro

[awids]

Binde doch Font Awesome mit ein, danach kannst du die Icons wie Text behandelt. Also mit Hovereffekt und allem.

[sandro22]

Was ist den das und wie funktioniert das? Hab noch nie was davon gehört.

[awids]

Gib es Mal bei Google ein. Bin gerade unterwegs und kann die Informationen nicht so gut mit dem Smartphone zusammen tragen.

Du musst lediglich die dort angebotene CSS-Datei downloaden und in deine general.css.php oder je nach Template in die general_bottom.css.php einbinden.

Dann findest du unter der Website von Font Awesome den Menüpunkt "Icons". Hier kannst du dir benötigte Icons anklicken und es wird dir ein Einbindecode oder a la

<i Classic="fa fa-home"></i>

angezeigt, den du statt der Grafik vor das Wort "Startseite" setzt.

[sandro22]

Hab mich schon mal ein bischen schlau gemacht über google. Da gibt es ja verschidene seiten wo was angeboten wird.

[awids]

Nimm Font Awesome. Das ist gängig und wird sogar im responsiven Modified-Template benutzt.

[sandro22]

du meinst diese seite? https://fortawesome.com/

[awids]

Nein, Font Awesome mit "n".

Hier wird erklärt, wie du es als CDN, CSS oder als LESS/SASS einbinden kannst:
http://fontawesome.io/get-started/

Hier findest du dann die Icons:
http://fontawesome.io/icons/

[sandro22]

Ok danke ich werde mich da mal versuchen. Hoffe es klappt.

[sandro22]

Es Scheint zu Funktionieren so halbwegs. Es wird was angezeigt jedoch nicht das Icon. Hab ein Bild angehängt.
[ Für Gäste sind keine Dateianhänge sichtbar ]

Irgendwas scheint es noch nicht zuladen?

Gruss
sandro