HOME-Icon statt Startseite in Navigation

Guten Tag,

ich möchte gerne statt "Startseite" ein Home-Icon (z.B. Font-Awesome) in der Navigation haben.

Dazu habe ich auf einer anderen Seite bereits folgendes im Template (fe_page-genutzt:

PHP-Code:

---

<?php $this->block('header'); ?>
        <?php if ($this->header): ?>
          <header id="header" itemscope itemtype="http://schema.org/WPHeader">
            <div class="inside">
             <?= str_replace('>Startseite<','><i class="fa fa-home" aria-hidden="true"></i><',str_replace('<a href="./" title="Startseite" class="sibling first" itemprop="url"><span itemprop="name">Startseite</span></a>','<a href="{{link_url::2}}" ><i class="fa fa-home" aria-hidden="true"></i></a>',$this->header)) ?>
            </div>
            <?php echo $this->sections['Header']; ?>
          </header>
        <?php endif; ?>
      <?php $this->endblock(); ?>

---

Leider ersetzt er nicht Startseite durch das I-Element, obwohl ">Startseite<" in der Navi vorkommt?! habt Ihr Ideen dazu?

Gruß

Template Änderung brauchst du dafür nicht. Einfach nur in den Seiteneinstellungen der Startseite die CSS Klasse index geben (Vorschlag) und dann das Menü per CSS dementsprechend stylen.

Zitat:

---

Zitat von Spooky

Template Änderung brauchst du dafür nicht. Einfach nur in den Seiteneinstellungen der Startseite die CSS Klasse index geben (Vorschlag) und dann das Menü per CSS dementsprechend stylen.

---

Danke für die schnelle Antwort. Nun steht dort ja immernoch Startseite (Seitennamen) drinne. Wie bekomm ich dies nun weg (Pflichtfeld) und das Home-Icon an diese Stelle?

Die Klasse habe ich vergeben.

Dem Home-Element CSS text-indent:-3000px; zuweisen

https://htmldog.com/references/css/p...s/text-indent/

Zitat:

---

Zitat von Kahmoon

Dem Home-Element CSS text-indent:-3000px; zuweisen

https://htmldog.com/references/css/p...s/text-indent/

---

Ich glaube, dass ich das gerade nicht ganz verstehe. Ich habe ja folgenden Aufbau:

HTML-Code:

---

<li ....
<a class="index sibling first" href="./" title="xy" itemprop="url">
<span itemprop="name"> Startseite </span>
</a>
</li>

---

Wenn ich dem a-Element bzw. der Klasse "index" nun text-indent gebe, dann ist der Text weg, aber doch auch der Link, oder ist das nicht so, wenn ich nun FontAwesome per Content einfüge?
Sieht bei mir im Browser so aus, als wenn der Link komplett weg ist ...

Das Home-Icon muss natürlich noch klickbar sein.

Das Icon kannst du ja absolut positionieren und nicht als inline Element.

Der Link dürfte dann ned weg sein. Du kannst hier mal schauen wie ich es gelöst habe.

Dort habe ich im Strukturpunkt Startseite eine Klasse "navi-start" vergeben...der Rest is CSS. Kannst du dir oben direkt in der Seite anschauen.

Edit:
Sorry..nicht Klasse home sondern navi-start

Zitat:

---

Zitat von Kahmoon

Der Link dürfte dann ned weg sein. Du kannst hier mal schauen wie ich es gelöst habe.

Dort habe ich im Strukturpunkt Startseite eine Klasse "navi-start" vergeben...der Rest is CSS. Kannst du dir oben direkt in der Seite anschauen.

Edit:
Sorry..nicht Klasse home sondern navi-start

---

Ich danke euch beiden für die Antworten! Ich habe es nun mit Background-Image und Text-indent gemacht, wie es bei der Seite des Links gemacht wurde. Funktioniert super!

Danke.