✔ Awesome Font und Navigation

[MrMurphy]

Hallo

aber das arbeitet nicht wirklich

Die Angabe hilft leider nicht weiter. Bei mir funktioniert die Lösung. Wenn du damit überfordert bist die Lösung in deine Webseite zu übernehmen brauchen wir am besten einen Link zu deiner Seite.

Deine Quelltextschnipsel oder der Link zu einem Template sind leider nicht hilfreich dich konkret zu unterstützen.

Aktueller wäre folgende Lösung, da Inhalt und Gestaltung getrennt werden. Nach den HTML5-Richtlinien sollen nach Möglichkeit keine Elemente im HTML-Quelltext erstellt werden, die nur der Gestaltung dienen.

Dieser HTML-Quelltext

<nav class="bsp02">
   <a href="/">Home</a>
   <a href="/about/">About</a>
   <a href="/farming/">Farming</a>
   <a href="/energy/">Energy</a>
   <a href="/contact/">Contact</a>
</nav>

und dazu dieses CSS

.bsp02 {
   display: flex;
   flex-direction: column;
}
.bsp02 a {
   display: flex;
}
.bsp02 a::before {
   font-family: FontAwesome;
   text-align: center;
   width: 1.2rem;
   margin-right: 1rem;
}
.bsp02 a:nth-child(1)::before {
   content: "\f015";
}
.bsp02 a:nth-child(2)::before {
   content: "\f007";
}
.bsp02 a:nth-child(3)::before {
   content: "\f007";
}
.bsp02 a:nth-child(4)::before {
   content: "\f007";
}
.bsp02 a:nth-child(5)::before {
   content: "\f003";
}

Zu meinen beiden Beispielen habe ich mal eine Seite direkt zum Ausprobieren erstellt.

http://boratb.bplaced.net/index07.html

Gruss

MrMurphy

 

[SpiceLab]

Wenn du damit überfordert bist die Lösung in deine Webseite zu übernehmen

Wenn Du genervt bist, weil ein User Deiner Fachkompetenz nicht das Wasser reichen kann, dann halte Dich doch bitte zurück - sei es in der Ausdrucksform, oder gänzlich in dem Thema.

Es wirkt leider arrogant u. oberlehrerhaft, wenn der Hilfeleistende mit seiner langjährigen praktischen Erfahrung so von oben herab daherkommt.

Nach den HTML5-Richtlinien sollen nach Möglichkeit keine Elemente im HTML-Quelltext erstellt werden, die nur der Gestaltung dienen.

Alles soweit richtig.

Wenn Du aber die Beispiele auf http://fontawesome.io/examples/ anschaust, wirst Du erkennen, dass die Entwickler dieses Markup implementiert haben (statt dem <span> kommt dort <i> zum Einsatz - mit dem Hinweis, dass erstgenannntes in einigen Fällen sogar semantisch korrekter ist), und die Icons mittels der content-Eigenschaft als generierter Inhalt behandelt werden.

Als "Endverbraucher" macht man sich auch nicht immer zwangsläufig tiefsinnigere Gedanken darüber, ob das angewendete Markup eines Frameworks, Plugins, usw. zu 100% den HTML5-Richtlinien entspricht.

 

[kosovafan]

Die Angabe hilft leider nicht weiter. Bei mir funktioniert die Lösung. Wenn du damit überfordert bist die Lösung in deine Webseite zu übernehmen brauchen wir am besten einen Link zu deiner Seite.

Ich habe es verkehrt ausgedrückt, Entschuldigung. Deine Lösung hat funktioniert, mit eben linksbündiger Ausrichtung. Aber ich hätte das lieber mittig und so strukturiert. Das war mein Problem, ich habe irgendwie keine Lösung gefunden.

Deine Quelltextschnipsel oder der Link zu einem Template sind leider nicht hilfreich dich konkret zu unterstützen.

Ich nutze Middleman um Websites zu erstellen und irgendwo fehlt einen sowas wie Pastebin für Websites. Deshalb nur diese Auszüge.

http://boratb.bplaced.net/index07.html

Wie gesagt die Lösungen arbeiten, siehe Screenshot. Aber wie richte ich das so sauber jetzt mittig ohne Verlust aus. Das ist meiner Meinung nach ein Problem das ich nicht lösen kann. Ich mache Website Erstellung mehr aus Spaß und Neugier und finde es angenehmer als TV zu schauen. Obwohl ich mich manchmal auch sehr ärgere und nicht selten war es nur ein Rechtschreibfehler.

Danke & Schönen Tag
Silvio

 

[kosovafan]

Wenn Du genervt bist, weil ein User Deiner Fachkompetenz nicht das Wasser reichen kann, dann halte Dich doch bitte zurück - sei es in der Ausdrucksform, oder gänzlich in dem Thema.

Das ist schon okay, ich hatte mich verkehrt ausgedrückt und es war spät. Ich habe mich verkehrt ausgedrückt und ohne Beschreibung kann es keine Hilfestellung geben.

Es wirkt leider arrogant u. oberlehrerhaft, wenn der Hilfeleistende mit seiner langjährigen praktischen Erfahrung so von oben herab daherkommt.

Es gibt schlimmeres. MrMurphy hat eine Lösung angeboten und das sogar visualisiert. Das sieht man selten. Dafür gebührt im ein Dankeschön, schon für alle nachfolgenden Leser. Stellen Sie mal eine Frage zur richtigen Programmierung, C, Java und Co. dann erleben Sie die tollsten Dinger. Ich benutze seit Jahren Linux als OS und es wurde einen mal gesagt, installiere Linux, baue deinen Kernel und lerne C. Kommt man dann auf Probleme und Fragezeichen, ja dann lernen Sie wirkliche Arroganz kennen. Nicht die Linux Community an sich, aber die ganzen Programmierer darum. Das ist der helle Wahnsinn. Da bekommst du nicht selten die Antwort, ließ das Howto, dieses Tutorial und nerv uns nicht aber nutze weiter Linux, lerne Programmierung und am besten zahlst du unseren Einsatz zurück mit einen fetten Programm.

Wenn Du aber die Beispiele auf http://fontawesome.io/examples/ anschaust, wirst Du erkennen, dass die Entwickler dieses Markup implementiert haben (statt dem <span> kommt dort <i> zum Einsatz - mit dem Hinweis, dass erstgenannntes in einigen Fällen sogar semantisch korrekter ist), und die Icons mittels der content-Eigenschaft als generierter Inhalt behandelt werden.

Das I Element und auch span nutze ich selten, meistens setze ich die CSS Klassen im a Element, oder im button Element. Das ist okay solange die Navigation horizontal ausgerichtet ist, aber vertikal ist die Gliederung ein echtes Problem für mich insbesondere bei mittiger Ausrichtung. Mittig ist in CSS sowieso eine sehr komische Angelegenheit.

Als "Endverbraucher" macht man sich auch nicht immer zwangsläufig tiefsinnigere Gedanken darüber, ob das angewendete Markup eines Frameworks, Plugins, usw. zu 100% den HTML5-Richtlinien entspricht.

Ich glaube das ändert sich auch zuviel, neues kommt hinzu, es kommen neue Hypes und am Ende steht man da und versucht die Page wenigstens konform zu halten. Mehr kann man als "Normaler" Mensch auch nicht tun.

Mfg

 

[kosovafan]

Das Problem besteht darin, dass die Breite der einzelnen Icons variiert (.fa-home::before = 13.9333px, .fa-user::before = 11.7833px, .fa-envelope-o::before = 15px).

Folglich wären differenzierte margin-right-Werte für das Pseudoelement ::before gefragt, um die Linktexte in einer Flucht neben den Icons auszurichten.

So wäre z.B. der rechte Abstand für .fa-user::before um 3.2167px größer als für .fa-envelope-o::before.

JSFiddle-Demo: https://jsfiddle.net/spicelab/fwr2w29n/

Das arbeitet, vielen Dank.

Danke & Schönen Tag
Silvio

 

[Sempervivum]

Das Problem besteht darin, dass die Breite der einzelnen Icons variiert (.fa-home::before = 13.9333px, .fa-user::before = 11.7833px, .fa-envelope-o::before = 15px).

Das kann man leicht beheben, indem man den Icons eine feste Breite gibt. Dann muss man es nicht Icon für Icon individuell austarieren und es ist änderungsfreundlicher:
https://jsfiddle.net/Sempervivum/q9jx50ow/5/