Awesome Font und Navigation

kosovafan

Erfahrenes Mitglied
Hallo,

zurzeit nutze ich folgendes MarkUp

Code:
<header>
    <figure>
        <img src="/static/img/layout/logo.png" alt="logo">
    </figure>

    <button class="fa fa-bars" id="toggle"></button>

    <section class="overlay" id="overlay">
 
            <nav class="overlay-menu">
                <a href="/" title="Start"> <span class="fa fa-home"> Home</span></a>
                <a href="/about/" title="About"><span class="fa fa-user"> About</span></a>
                <a href="/farming/" title="Farming"><span class="fa fa-user"> Farming</span></a>
                <a href="/energy/" title="Energy"><span class="fa fa-user"> Energy</span></a>
                <a href="/contact/" title="Contact"><span class="fa fa-envelope-o"> Contact</span></a>
            </nav>
    </section>
</header>

Gibt es eine Möglichkeit Font-Awesome Icons untereinander zu machen und die Links sauber daneben? Das nicht die Text Länge das aussehen bestimmt wie im Screenshot.

Danke und schönen Tag
Mfg
 

Anhänge

  • Bildschirmfoto_2016-10-13_14-06-32.png
    Bildschirmfoto_2016-10-13_14-06-32.png
    343,1 KB · Aufrufe: 8
Ohne das zugehörige CSS für den HTML-Ausschnitt gesehen zu haben, gilt augenscheinlich dem Screenshot zufolge text-align:center für <section> oder <nav>, was zu dieser Darstellung führt.

Dementsprechend richtet text-align:left den Inhalt linksbündig aus, und die Icons erscheinen somit in einer Flucht untereinander.

[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Aber gibt es keine Möglichkeit das trotz Ausrichtung Center für das Hauptelement die Icons und Links in einer Flucht laufen zu lassen?

Danke & Schönen Tag
Silvio
 
Hallo

Was verstehst du unter "die Icons und Links in einer Flucht laufen zu lassen"?

Kannst du den HTML-Quelltext ändern oder ist der vorgegeben?

Gruss

MrMurphy
 
Hallo,

ich habe mal eine Grafik erstellt um es zu visualisieren. So wäre es super, zentriert aber sieht anständig aus. Ja HTML der Links ist frei gestaltbar, ich würde nur gerne auf auf ul li verzichten.

Mfg
 

Anhänge

  • menu.png
    menu.png
    23,4 KB · Aufrufe: 3
Hallo

Dann könntest du zu diesem HTML

Code:
<nav class="bsp01">
   <a href="/"><span class="fa fa-home"></span><span>Home</span></a>
   <a href="/about/"><span class="fa fa-user"></span><span>About</span></a>
   <a href="/farming/"><span class="fa fa-user"></span><span>Farming</span></a>
   <a href="/energy/"><span class="fa fa-user"></span><span>Energy</span></a>
   <a href="/contact/"><span class="fa fa-envelope-o"></span><span>Contact</span></a>
</nav>

dieses CSS verwenden:

Code:
.bsp01 {
   display: flex;
   flex-direction: column;
}
.bsp01 a span:nth-child(1) {
   text-align: center;
   width: 1.2rem;
}
.bsp01 a span:nth-child(2) {
   margin-left: 1rem;
}

Statt rem kannst du natürlich auch andere Einheiten verwenden.

Gruss

MrMurphy
 
Hallo,

danke aber das arbeitet nicht wirklich. Ohne center sieht es gut aus, aber für die Mobile Bedienung wäre ein center glaube ich angenehmer.

html Aufbau habt Ihr, hier noch das CSS:

Code:
header#main {
    @include outer-container(100%);
    @include clearfix;
    position: relative;

    figure {
        padding: 1em;
    }

    button.fa-bars {
       position: fixed;
       cursor: pointer;
       z-index: 100;
       background: none;
       border: none;
       top: 1em;
       right: 1em;
       display: block;
       outline: 0;
       font-size: 2em;
       color: $light-gray;
    }

    nav {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    nav a {
        color: $light-gray;
        display: block;

        span:nth-child(1) {
            text-align: center;
            width: 1.2rem;
        }

        span:nth-child(2) {
            margin-left: 1rem;
        }       

        &:hover {
            color: white;
        }
    }   
}

section.overlay {
    position: fixed;
    background: $dark-gray;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
}

.overlay.open {
    opacity: .9;
    visibility: visible;
    height: 100%;
}

.overlay nav {
    position: relative;
    height: 70%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 2em;
    text-align: center;
}

Javascript Part falls das jemand nutzen möchte.

Code:
$('#toggle').click(function() {
   $(this).toggleClass('active');
   $('#overlay').toggleClass('open');

Danke & Schönen Abend
Silvio
 
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/
 
Zurück