Das sind einfach nur verlinkte bilder. Oder neuerdings font awsome zeichen und css magie Wie bei uns auf der seite
So wei bei Euch die Icons links sind, hätte ich die gerne im Header ganz oben mittig Kann ich die Icons einfach aus dem Netz speichern? und wie kann ich das realisieren, dass die oben sind? welches Content und welche Einstellung im SE?
Die Icons werden komplett mittels Schriftart und CSS erstellt. Geh in den Gambio Demo shop 1 oder 2 - da sind die Symbole unten im Footer rechts. Den COde kannst dir dort direkt aus dem Content Manager für Footer 4 holen. Ist ne Liste im Quellcode.
Wie bekomme ich die Icons weiter runter? einfach Leerzeichen macht er nicht und mit </div> geht es auch nicht... das ist der code <ul class="social-media-icons"> <li><a class="facebook" href="#"><i class="fa fa-facebook-f"></i></a></li> <li><a class="instagram" href="#"><i class="fa fa-instagram"></i></a></li> <li><a class="googleplus" href="#"><i class="fa fa-google-plus"></i></a></li> </ul> Und wie kann ich die Icons verlinken?
Die Icons sollen in den Header wie im Demoshop hier die 3 Runden Symbole! Hab schon alles mögliche probiert... komme einfach nicht weiter! Bitte um Hilfe
dir fehlen Kentnisse in html und css - sprich design für da oben im header gibts auch nen conten manager eintrag. dort musst die liste reinmachen. zu deiner aussage mit nem DIV bekommst es nicht hin - div ist nur ein container. solange du dem nicht sagst wie er sein soll macht der nur das minimum,
Schaut aktuell so aus mit folgendem HTML-Code <ul class="social-media-icons"> <li><a class="facebook" href="(Link nur für registrierte Nutzer sichtbar.)"><i class="fa fa-facebook-f"></i></a></li> <li><a class="instagram" href="(Link nur für registrierte Nutzer sichtbar.)"><i class="fa fa-instagram"></i></a></li> </ul> wieso zeigt der die Icons im Footer, aber nicht oben im Header nehme dazu folgendes Content
Dein Problem ist, dass die Styles, die wir für die Social-Media-Icons haben, nur für den Footer definiert sind. Da deine Icons im Header stehen greift da das CSS nicht. Gehe also in deinem StyleEdit3 auf Eigenes CSS und versuch da mal das hier einzufügen: Code: #header { .social-media-icons { position: absolute; list-style: none; padding: 0; margin: 0; top: -50px; > li { display: block; float: left; padding-left: 0; padding-right: 10px; a { display: table-cell; vertical-align: middle; text-align: center; width: 40px; height: 40px; background: #000000; color: #FFFFFF; font-size: 22px; &.facebook { background-color: $gx-facebook; &:hover { background: #FFFFFF; color: $gx-facebook; } } &.instagram { background-color: $gx-instagram; &:hover { background: #FFFFFF; color: $gx-instagram; } } @include border-radius(50%); } } } } Das ist jetzt von mir nicht großartig getestet, sollte aber eigentlich funktionieren
Hi @Torben (Gambio) , danke für deine Mühe. Hab es so eingefügt, funktioniert aber leider nicht. die Icons werden mit einem Punkt vor dem Icon aufgeführt, also genau wie vorher auch schon. Aber wenigstens hat Dein CSS nichts zerschossen.
Hallo zusammen. Ich hätte mal eine Frage. Wie kann ich folgenden Code in meinem Header integrieren, sodass dieser sichtbar wird und funktioniert. HTML: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .fa { padding: 20px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 30%; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #333333; color: white; } .fa-twitter { background: #55ACEE; color: white; } .fa-google { background: #dd4b39; color: white; } .fa-linkedin { background: #007bb5; color: white; } .fa-youtube { background: #bb0000; color: white; } .fa-instagram { background: #125688; color: white; } .fa-pinterest { background: #cb2027; color: white; } .fa-snapchat-ghost { background: #fffc00; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } .fa-skype { background: #00aff0; color: white; } .fa-android { background: #a4c639; color: white; } .fa-dribbble { background: #ea4c89; color: white; } .fa-vimeo { background: #45bbff; color: white; } .fa-tumblr { background: #2c4762; color: white; } .fa-vine { background: #00b489; color: white; } .fa-foursquare { background: #45bbff; color: white; } .fa-stumbleupon { background: #eb4924; color: white; } .fa-flickr { background: #f40083; color: white; } .fa-yahoo { background: #430297; color: white; } .fa-soundcloud { background: #ff5500; color: white; } .fa-reddit { background: #ff5700; color: white; } .fa-rss { background: #ff6600; color: white; } </style> </head> <body> <h2>Style Social Media Buttons</h2> <!-- Add font awesome icons --> <a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> <a href="#" class="fa fa-google"></a> <a href="#" class="fa fa-linkedin"></a> <a href="#" class="fa fa-youtube"></a> <a href="#" class="fa fa-instagram"></a> <a href="#" class="fa fa-pinterest"></a> <a href="#" class="fa fa-snapchat-ghost"></a> <a href="#" class="fa fa-skype"></a> <a href="#" class="fa fa-android"></a> <a href="#" class="fa fa-dribbble"></a> <a href="#" class="fa fa-vimeo"></a> <a href="#" class="fa fa-tumblr"></a> <a href="#" class="fa fa-vine"></a> <a href="#" class="fa fa-foursquare"></a> <a href="#" class="fa fa-stumbleupon"></a> <a href="#" class="fa fa-flickr"></a> <a href="#" class="fa fa-yahoo"></a> <a href="#" class="fa fa-reddit"></a> <a href="#" class="fa fa-rss"></a> </body> </html>
Bitte benutze in Zukunft die Code-Box für so etwas. Das erspart das endlose Scrollen. Font Awesome ist im Shop integriert. Alles was zwischen <style> und </style> steht gehören ins css. Das kannst Du entweder in eine eigene social.css-Datei schreiben und im Verzeichnis templates/ Honeygrid/ usermod/ css/ ablegen, oder im Style Editor unter eigenes css einfügen. und das <a href="#" class="fa fa-facebook"></a> und was Du da sonst noch für Icons haben möchtest, schreibst Du dahin, wo die Icons mit dem Link zu Deiner Seite stehen sollen. Wobei Du an stelle von "#" Deine entsprechende URL eintragen musst.
das css is eigentlch für die symbole schon alles im SHop vorhanden, man braucht die lediglich per html abzurufen als elemente. Die icons sind alle schon im css definiert. werden ja auch schon genutzt - im demoshop z.b. beim footer die Symbole.
Hallo Barbara, danke dir bereits für deine Hilfe. Ich werde in Zukunft deinem Rat folgen . Ich habe eine eigene social.css Datei angelegt. Wenn ich nun im Content Manager im Header unter Quellcode folgendes eingebe passiert nichts: <a href="#" class="fa fa-facebook"></a> Sprich ich sehe kein Icon und beim erneuten Öffnen des Quellcodes ist dieser auch nach Speicherung wieder verschwunden. Zudem sorgt meine erstellte css Datei dafür, dass bereits vorhandene Icons im Footer überschrieben werden und diese Verzerrungen aufweisen. Kann ich meine alten Icons nach wie vor behalten oder muss ich diese identisch mit meinen Icons im Header gestalten? Liebe Grüße Aylin