Dieses Projekt wird in seiner aktuellen Form die Tore bald schließen.
Hier mehr erfahren: Unsere Zukunft innerhalb des WoltLab-Ökosystems
  • Huhu,
    ich habe gerade verzweifelt versucht eine eiegene Dashboardbox zu erstellen mit einem simplen Facebook Button wie dem euren in der Fußzeile und einem kleinen Text dahinter.
    Ich schaffe es jedoch nicht.


    Baue ich den als WCF "Werbung" Box ein bekomme ich zum verzweifeln keinen Zeilenumbruch hin.


    Ich muss gestehen ich habe auch keinen richtigen Ansatz denn ich will den als Icon aus dem Fontawesome Repertoire nutzen mit einem "hover" Effekt aber es klappt nicht :(


    Das ist meine Umsetzung bisher:


    HTML
    <a href="https://www.facebook.com/knopfstadt/" target="_blank">
    	<span id="facebook_button">
    		<span class="fa fa-facebook-square" style="color: inherit; font-size: inherit;"  >
    		</span>
    	</span>
    <p class="facebook_button">Wir auf Facebook!</p>
    </a>


    Weder einen Zeilenumbrauch schaffe ich unter ACP / Werbung/ noch das es sauber aussieht.
    Wenn ich eine eigene Dashboard Box erstelle mit dem Plugin von Mobahner und ich weiß nicht genau wie ich es sauber angehe und umsetze denn dort regieren die Klassen zum Teil nicht und wirklich ordentlich sieht es auch nicht aus.
    Ganz sicher bin ich mir mit der Verwendung von <span> auch nicht etc. :(


    Kann mir bitte jemand Schrittweise einen vernüftigen Lösungsweg erklären wie man per HTML Fontawesome Icons integriert und die noch individuell anpasst?
    :(

    • Offizieller Beitrag

    Einen Zeilenumbruch erzeugst du in HTML mit dem <br />-Element. Zur Steuerung der Größe der Icons solltest du zudem die vom Framework mitgelieferten CSS-Klassen nutzen:


    • icon16
    • icon32
    • icon64

    Die ID facebook_button würde ich zudem den inneren span-Element verpassen, da dieser der eigentliche Facebook-Button ist. Den äußeren Span mit der ID kannst du dann getrost entsorgen, da überflüssig.


    Eine Farbe kannst du den Font-Awesome-Icons mit dem normalen color-Attribut in CSS geben. Einen Hover-Effekt setzt du über #facebook_button:hover {…} um.


    Anstatt eines eigenen Textes würde ich die Nutzung eines Tooltips beim Hover vorschlagen. Eine Anleitung dazu befindet sich im Blog in der Kategorie WSC/WSC.

  • Auch hier wieder vielen Dank Dennis, sehr klasse Hilfe.


    So sieht mein Code nun aus:

    CSS
    /* Social Buttons Sidebar */
    #facebook_button {
        	display:block;
    	margin-left: auto;
        	margin-right: auto;
    	    	&:hover {
    			color: #3b5998;		
    	}
    }


    HTML
    <a href="https://www.facebook.com/knopfstadt/" target="_blank" title="Knopfstadt.de auf Facebook!" class="jsTooltip">
    		<span id="facebook_button" class="icon48 fa fa-facebook-square">
    		</span>
    </a>


    Das einzige optische "Problem" welches ich habe, der FB Button alleien wirkt so verloren daher die Idee mit dem Text daneben und weil es die einzige aktive SocialPlattform ist die ich nutze. Und so wie es jetzt ist, mittig wirkt nicht wirklich toll. Hats du noch eine gute Idee?


    Und ich kann keine Icongröße >icon48 nehmen, alles was ich darüber nutze wird runterskaliert auf < 12px.


    LG