Social Media Buttons um Insteragram erweitern
Eingetragen von gil (146)am 24.10.2025 - 22:06 Uhr in
Hallo, nutzte unter Drupal 11, weiterhin dootstrap aus dem ollen Kurs 'Drupal 8 Komplett Der Kurs für Anfänger und Web-Designer', soweit ist aber alles gut.
Nun wollte ich jedoch im Block Social Media Buttons mal eben schnell noch Insteragram hinzufügen, was mir zwar gelingt, aber es werden nur die circle-btn mit dem jeweiligen background-color dargestellt. Die von FontAwesome 4.7 Zeichen im inneren der circle-btn sind jedoch alle samt verschwunden, was mache ich falsch?
Irgendwann habe ich mal google in den Kommentar gesetzt und dafür Whatsapp hinzugefügt, das hat damals auch funktioniert, warum nun nicht mehr? Anbei mal die zwei betreffenden Codeabschnitte.
Social Media Buttons
<p>
<a class="circle-btn fb-color" href="https://www.facebook.com/Tafel-Neustadt-Hassloch-968280363360925" target="_blank"></a>
<!-- <a href="#" class="circle-btn google-color"><i class="fa fa-google-plus" aria-hidden="true"></i></a><br /> -->
<a class="circle-btn wa-color" href="https://wa.me/491727540810" target="_blank"></a>
</p>style.css
.circle-btn {
border-radius: 50%;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 30px;
background-color: #fff;
margin: 5px;
}
.circle-btn .fa {
padding: 4px;
}
.fb-color {
background-color: #3b5998;
color: #fff;
}
.google-color {
background-color: #dd4b39;
color: #fff;
}
.wa-color {
background-color: #34af23;
color: #fff;
}
.fb-color:hover {
background-color: #578AE2;
color: #fff;
}
.google-color:hover {
background-color: #F95040;
color: #fff;
}
.wa-color:hover {
background-color: #45E22C;
color: #fff;
}- Anmelden oder Registrieren um Kommentare zu schreiben
Keine Ahnung was du falsch
am 30.10.2025 - 17:13 Uhr
Keine Ahnung was du falsch machst. Machs halt einfach richtig.
<a href="#" class="circle-btn google-color"><i class="fa fa-instagram" style="color: #ffffff;"></i></a>.google-color {
color: #fff;
background-image: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff8d58 45%, #dc4867 60%, #bc2d8d 80%, #532997 100%);
}
Ich hab mal den auskommentierten Google-Button genommen dass sieht dann im Endergebnis so aus:
Es ist schwierig zu sagen, was du falsch machst, wenn du einfach nur CSS und HTML-Code postest. Aber im Grund würde ich sagen, mach halt einfach ne neue Klasse für den Hintergrund hin sowas wie .instagram-color und dann nimmst du die richtig benannte CSS-Klasse aus Font-Awesome für das Instagram-Icon. Wie oben. Dann wird's sicher klappen Und mach den Kommentar aus dem HTML-Code Google Plus gibt's seit gefühlten 100 Jahren nicht mehr. Dass kommt auch nicht wieder.
das sieht bei dir gut aus,
am 31.10.2025 - 14:16 Uhr
das sieht bei dir gut aus, zeige dir mal meine Bilder.
Dies wäre vorher bzw. bisher
Bild
Und dies nachdem ich instagram hinzufügte
Bild
So evtl. jetzt besser, das mit Bilder einfügen ist echt tricky hier.
Was meinst du mit template
Super ich komm so aber nicht
am 31.10.2025 - 14:11 Uhr
Super ich komm so aber nicht an die Bilder, weil ich mehr Werbung angezeigt bekomme als sonst was. Nur die beiden Bilder gibt die Seite nicht her ????
Zeig mir doch lieber dass Twig-Template. Dass kannst du doch hier reinkopieren
und dies meine
am 31.10.2025 - 14:04 Uhr
und dies meine css
.circle-btn {
border-radius: 50%;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 30px;
background-color: #fff;
margin: 5px;
}
.circle-btn .fa {
padding: 4px;
}
.fb-color {
background-color: #3b5998;
color: #fff;
}
.ig-color {
background-color: #e1306c;
color: #fff;
}
.google-color {
background-color: #dd4b39;
color: #fff;
}
.wa-color {
background-color: #34af23;
color: #fff;
}
/* Hover-Effekte */
.fb-color:hover {
background-color: #578AE2;
color: #fff;
}
.ig-color:hover {
background-color: #ed82a6;
color: #fff;
}
.google-color:hover {
background-color: #F95040;
color: #fff;
}
.wa-color:hover {
background-color: #45E22C;
color: #fff;
}
kannst du mir die twig Datei
am 31.10.2025 - 14:24 Uhr
kannst du mir die twig Datei etwas genauer benennen, ich habe davon viele, z.B. unter 'custom/dootstrap/templates/'
Du brauchst diesen Code <a
am 31.10.2025 - 14:43 Uhr
Du brauchst diesen Code
<a class="circle-btn fb-color" href="https://www.facebook.com/Tafel-Neustadt-Hassloch-968280363360925" target="_blank"><i class="fa fa-facebook" style="color: #ffffff;"></i></a> <a class="circle-btn ig-color" href="https://instagram.com/tafel_neustadt_hassloch" target="_blank"><i class="fa fa-instagram" style="color: #ffffff;"></i></a> <a class="circle-btn wa-color" href="https://wa.me/491727540810" target="_blank"><i class="fa fa-whatsapp" style="color: #ffffff;"></i></a>Sieht dann so aus
<div><a class="circle-btn fb-color" href="https://www.facebook.com/Tafel-Neustadt-Hassloch-968280363360925" target="_blank"><i class="fa fa-facebook" style="color: #ffffff;"></i></a> <a class="circle-btn ig-color" href="https://instagram.com/tafel_neustadt_hassloch" target="_blank"><i class="fa fa-instagram" style="color: #ffffff;"></i></a> <a class="circle-btn wa-color" href="https://wa.me/491727540810" target="_blank"><i class="fa fa-whatsapp" style="color: #ffffff;"></i></a></div>Das p-Tag gehört da nicht hin, dass erzeugt eienne Abstand nach unten den keiner braucht.
Das ganze sieht dann so aus:
ok thx, habe den Code von dir
am 31.10.2025 - 14:55 Uhr
ok thx, habe den Code von dir (
Sehr gut. Das Twig Template
am 31.10.2025 - 15:17 Uhr
Sehr gut. Das Twig Template kann ich dire nicht benennen, weil ich dass auf meiner Seite im Browser nicht sehen kann. Dass liegt server-side. Der Code gehört grundsätzlich da hin, wo du gestern den auskommentierten Google-Plus-Link weggelöscht hast und dann geht's :-D
guten Morgen ok thx, was für
am 01.11.2025 - 10:29 Uhr
guten Morgen ok thx, was für eine *.twig bei mir zuständig ist kann ich dir auch nicht mehr sagen, ist alles schon zu lange her, aber ich suche gerade den Server nach dem Text 'google-plus' ab, das wird ein wenig andauern.
Ansonsten trag ich den Code im Backend ein
Gut dann steht der code
am 01.11.2025 - 11:52 Uhr
Gut dann steht der code innerhalb deines Backendes. sprich in der Datenbank. Dass ist zwar nicht ideal, funktioniert aber. Du wirst auf deinem Server also die Text-Phrase nicht innerhalb deines Templates feinden, wenn du den auskommenden Button vorgestern dort aus dem Eingabeformular für den Blockinhalt gelöscht hast.
Okay, jetzt habe ich aber
am 03.11.2025 - 17:55 Uhr
Okay, jetzt habe ich aber immer noch nicht die Icons in den jeweiligen farbigen Kreisen. Wer kann mir helfen, die Kreise richtig darzustellen?
Wie genau sollen wir dir
am 03.11.2025 - 18:49 Uhr
Wie genau sollen wir dir helfen? Hast du den Code jetzt schon in der Seite?
Wenn du Hilfe brauchst können wir dass maximal an besagtem Server machen. Ich helf dir schon, aber so Ferndiagnose ln sind mühselig. Am Server dauert dass ganze vermutlich 3 Minuten, wenn man weiß was man tut