An die CSS Cracks-Wie Instagram Logo fontawesome mit buntem Hintergrund einfügen

[Timm]

Hallo

Hab im Footer eine Liste mit Socialmedia Icons. Dort soll auch Instagram erscheinen. Bei allen anderen Icons kann man die Farbe recht gut beim hovern ändern. Instagram hat aber so einen Farbverlauf.

Jetzt hab ich anhand dieser Vorlage versucht es einzubauen mittels eines background:

New Instagram Logo CSS3 gradient

Code: CSS  [Auswählen]

#layout_footer .socialmedia {
  background-color: #f4f4f4;
  border-top: 1px solid #dedede;
  color: #707070;
}
#layout_footer .socialmedia ul {
  box-sizing: border-box;
  list-style: none;
  width: 100%;
  max-width: 1140px;
  padding: 10px;
  margin: 0px auto;
  text-align: center;
}
#layout_footer .socialmedia li {
  display: inline-block;
  margin: 0 8px;
}
#layout_footer .socialmedia li i {
  font-size: 30px;
}
#layout_footer .socialmedia li.facebook a:hover i {
  color: #3b5998;
}
#layout_footer .socialmedia li.pinterest a:hover i {
  color: #cb2027;
}
#layout_footer .socialmedia li.wordpress a:hover i {
  color: #21759b;
}
#layout_footer .socialmedia li.instagram a:hover i {
  height: 30px;
  border-radius: 5px;
  color: #fff;
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

Wobei das heigt anscheinend nicht nötig ist.

Allerdings ist der Background größer, als das fontawesome Icon selbst und das sieht komisch aus, wenn man von links nach rechts hovert über die Icons.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Kann man das so ändern, dass der Farbverlauf nur innerhalb des Icons ist und damit das gesamte Icon gleich groß ist?

Oder wäre es optisch auch schön, wenn sich das Icon verkleinert und der Background genau die 30px hat, wie die anderen Icons?

Dafür fehlt mir der mögliche Code, um das auszuprobieren.

Für Hilfe dankbar.

Gruß Timm

Linkback: https://www.modified-shop.org/forum/index.php?topic=39407.0

[Timm]

Noch schöner wäre, wenn der Farbverlauf nur in den Linien des FA Icons vorkommt.

So etwa nur ohne den weißen Hintergrund.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Mit

Code: CSS  [Auswählen]

color: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);

hat es nicht funktioniert.

Gruß Timm

[Timm]

Habs hinbekommen mit dieser Anleitung, falls es auch mal jemand benötigt

Gradient on Font-Awesome Icon (ON HOVER)

in der stylesheet.css dies eingetragen

Code: CSS  [Auswählen]

#layout_footer .socialmedia li.instagram a:hover i {
  background: -webkit-radial-gradient(33% 100% circle, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
  background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Sieht dann so aus

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß Timm