Finde Grafik nicht

  • Hallo,

    ich habe mir ein Template fuer eine Webseite heruntergeladen und versuch diese zgerade zu verstehen und an meine Beduerfnisse anzupassen.
    Dabei bin ich auf folgenden Code gestossen, der wohl einen Button anzeigen soll - aber ich finde die zugehoerige Grafik nicht:

    HTML
    <div class="col-sm-3">    
       <i class="fa fa-cogs fa-3x"></i>    
       <h3>Fax-Service<br>             
       ab 4 Cent/Fax</h3>
    </div>


    Kann mir da jemand weiterhelfen? Waere super!

    Vagabundo

  • Danke, das hat mir echt weitergeholfen.

    Aber ich stehe auch schon vor dem naechsten Problem:

    Ich habe jetzt andere Zeichen aus dem Font Awesome genommen:

    HTML
    <div class="col-sm-3">
        <i class="fa fa-fax fa-3x"></i>    
    <h3>Fax-Service<br>             
    ab 4 Cent/Fax</h3>
    </div>

    Die alten Icons aus der Template Vorlage waren alle vier in einem orange gefuellten runden Kreis negativ dargestellt.
    Jetzt sind Kreise alle vier unterschiedlich:
    Das obige Beispiel mit fa-fax bringt ueberhaupt kein Zeichen in den Kreis und der Kreis ist nur noch halb so gross wie vorher.
    Das fa-phone ist ein leichtes Ei, das fa-mobile-phone ist ein sehr schmales Ei und nur fa-envelope-o wird korrekt dargestellt

    Ich finde aber auch in den awesome-Erklaerungen im Internet nirgendwo eine vernuenftige Beschreibung, mit der ich diese Kreise veraendern kann und weshalb das fa-fax eventuell nicht geht.

    Ich habe natuerlich auch das Beispiel aus der Anleitung, die Sailor mitr geschickt hat auf der Seite probiert:

    HTML
    <span class="fa-stack fa-lg">         
    <i class="fa fa-circle fa-stack-2x"></i>         
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>         
    </span>

    Aber da kommt auch nur ein sehr langgezogenes Eir dabei heraus.

    Waere toll, wenn mir da noch einmal jemand weiterhelfen koennte

    Vagabundo

    Einmal editiert, zuletzt von Vagabundo (23. April 2018 um 16:12) aus folgendem Grund: Fehler

  • Versuche bitte den 'box i' Elementen eine einheitliche Größe zu geben...

    HTML
    .box i {
      width: 2em;
      height: 2em;
      line-height: 2em;
      padding: 0px;
    }


    Die Zahlenwerte kannst du natürlich nach deinen Bedürfnissen anpassen.

    if(!sleep)

    {$sheep++;}

  • Super, vielen Dank.
    Da sind die Buttos jetzt zwar Quadrate, aber das ist erst einmal kein grosses Problem. Die Kreise sehen etwas harmonischer aus. Aber an erster Stelle steht die Funktion.
    Der alte Eintrag war uebrigends

    HTML
    border-radius:50%;

    Das hat sich wahrscheinlich immer auf die Groesse des Zeichens bezogen.
    Habe bei der Gelegenheit auch gleich noch die Farben angepasst und fa-fax scheint nur in einer neueren Version vorhanden zu sein. Die muss ich noch runterladen.

    Vagabundo

  • Hallo Sailor,

    das geht garnicht, bzw, die Zeichen sehen sehr lustig aus - aber kaum erkennbar.

    Ich werde es bei den quadratischen Button belassen - ich gewoehne mich langsam daran und ich empfinde es nicht als Nachteil.

    Groessere Sorgen macht mir immer noch das fa-fax. Es will einfach nicht kommen.

    Ich habe awesome jetzt auf Version 5 umgestellt, da fa-fax scheinbar erst ab dieser Version verfuegbar ist.
    In den access-logs kann ich auch sehen, dass die neue Version geladen wird:
    "GET /templates/multi/fonts/fontawesome-all.css HTTP/1.1" 304
    und scheinbar auch erfolgreich.

    Eben sehe ich noch 2 Sekunden spaeter, aber wohl aus dem gleichen Aufruf:
    "GET /templates/multi/fonts/fontawesome-webfont.woff?v=4.0.3 HTTP/1.1" 304

    Ist das korrekt?
    Nach der Anleitung von awesome wurden nur die Datei fontawesome-all.css und das Verzeichnis webfonts einkopiert. und zwar in das gleiche Verzeichnis (fonts in meinem Fall)

    Vagabundo

  • Der Status-Code 304... so interpretiere ich die von dir kopierte Meldung.. sagt, dass die Datei bereits beim letzten aktualisieren geladen wurde und deswegen jetzt nicht nochmal geladen wird.
    Leere mal deinen Browsercache und versuche es erneut... es müsste der Status 200 angezeigt werden, dann kannst du sicher sein, dass du die 'neue' Version hast.
    Das mit den lustig aussehenden Zeichen verstehe ich nicht - an den Zeichen dürfte das nichts ändern. Es sollte lediglich aus eckig rund machen. Aber ok, wenn dir eckig besser gefällt, dann lass es so ;)!

    if(!sleep)

    {$sheep++;}

  • Hallo Sailor,

    eckig gefaellt mir nicht besser, aber ich kann damit leben.
    Mit deinem Vorschlag fuer die runden Ikons kam ein wirres Durcheinander zwischen der Flaeche und dem Zeichen, so dass man fast nichts mehr erkennen konnte. Aber wie gesagt: Mit den eckigen Dingern kann ich auch leben.

    Habe jetzt mit Firefox die Seite angesehen. Aber fa-fax kommt einfach nicht.
    Ich wollte das fa-mobile-phone etwas groesser machen, weil es so sehr klein aussah. Habe deswegen auf fa-4x erhoeht. Aber da ist dann auch der ganze Button groesser geworden. Die 2em sind demnach die Raender um das Zeichen herum - oder?

    Aber das Hauptproblem ist, dass das fa-fax noch immer nicht kommt. Dafuer kommt ein weisser Rahmen und darin die Buchstaben FI und darunter RC oder AC.

    Ich habe es jetzt erst6mal so stehen lassen, falls Du noch einmal schauen koenntest. Vielleicht weisst Du ja was das bedeutet.

    Vagabundo

  • Ich habe mir das nochmal angeschaut... dein Problem mit den runden Icons kann ich nicht nachvollziehen. Wenn ich in der Simulation auf deiner Seite das boder-radius: 50%; wieder aktiviere, sieht alles schick aus... nichts von dem zu erkennen, was du da beschreibst! Anscheinend machst du da irgend etwas 'verkehrt' - kann ich aber so nicht erkennen, weiß ja nicht, was du da genau (sonst noch) machst!
    Das mit der Icon-Größe... da müsste ich nochmal genauer schauen. Das hängt natürlich alles zusammen, wenn man einen Parameter ändert, dann beeinflusst das möglicherweise alle anderen. zB.. du machst das Icon größer, es braucht dann mehr Platz und dadurch wird die Box größer. Wenn du dich auf eine Größe festgelegt hast, dann muss man anschließend alles andere nachjustieren, damit es optisch wieder passt!
    Das Fax Icon! ... ich glaube, deine Einfügecodes sind falsch!
    Geh mal auf https://fontawesome.com/icons?d=gallery&c=communication und check das mal für alle deine Icons!
    du fügst ein.... <i class="fa fa-fax fa-4x"></i> , die Awesome Seite sagt aber <i class="fas fa-fax fa-4x"></i>.
    Habe das jetzt nur beim Fax kontrolliert, ich gehe aber davon aus, dass es bei den anderen Icons auch falsch ist!

    - - - Aktualisiert - - -

    Mir ist noch was aufgefallen... der Bereich direkt unter den Telekommunikations-Icons ist (komisch) verschoben.
    Liegt daran, dass die Icons mit 'float' formatiert sind und dieses float noch auf den dahinter liegenden Bereich wirkt.
    Füge mal

    .features {
    clear: both;
    }

    in dein CSS ein, damit das float aufgehoben wird.

    if(!sleep)

    {$sheep++;}

  • Hallo Sailor,

    vielen Dank fuer Deine riesige Hilfe, Jetzt geht alles mit den Buttons. Ich habe es jetzt bei eckig belassen.
    Beim Fax lag es wirklich an dem fas.
    Ich hatte das mit der alten awesome-Version auch einmal getestet, weil ich verschiedene Beschreibungen fuer das fax gefunden hatte, mal mit fa und mal mit fas. Aber beides ging nicht.
    Deshalb hatte ich da nicht weiter mit dem fas probiert. Aber ich glaube es ist besser den firefox zum testen zu verwenden. Crome fuehrt da scheinbar oft in die Irre oder man muss jedesmal die History loeschen.

    Herzliche Gruesse
    Vagabundo