53 Aufrufe
Gefragt in Webseiten HTML von jensen Einsteiger_in (40 Punkte)
Moin in die Runde,

ich erstelle gerade eine webseite auf Basis von Bootstrap 4. Dort sollen auch social media Buttons mit dem entsprechenden link gezeigt werden. Viele Buttons sind ja bereits in font awesome hinterlegt, aber nicht alle :-(

facebook z.B. ist easy:

<li class="social-facebook"><a href="https://www.facebook.com/xxxxxx/" target="_blank"><i class="fa fa-facebook"></i></a></li>

Nun habe ich einen Button einzubauen, der nicht in font awesome integriert ist, es geht um kununu. Das Icon selbst habe ich erstellt, bekomme das aber nicht vernünftigt dargestellt ( img/kun.jpg  ist der Pfad zum Icon ).

 <button type="button" class="btn btn-default">   <img src="img/kun.jpg" alt="Icon"/>   </button>

bei diesem Queltext wird der Button richtig angezeigt, sobald ich den Link einfüge, wird der btn-default und das Icon untereinander angezeigt = unbrauchbar...

Einen Tipp von Euch in die richtige Richtung würde helfen :-)

Vielen Dank im Voraus

Gruß

Jens

3 Antworten

+1 Punkt
Beantwortet von flupo Profi (14.2k Punkte)
Ich würde das über die CSS-Datei lösen. Suche die beiden Klassen "social-facebook" und "fa fa-facebook" und kopiere sie in der Datei. Dann ändere die Namen in "social-kununu" und "fa fa-kununu". In letzterer Klasse muss dann noch der Link zum Bild angepasst werden. Den Link fügst du dann mit den beiden neuen Klassen ein.

Mit einem Link zur Seite geht es auch noch etwas genauer.

Gruß Flupo
0 Punkte
Beantwortet von jensen Einsteiger_in (40 Punkte)
Bearbeitet von jensen

Flupo, besten Dank für Deine Antwort

In der css bzgl. facebook ist nicht viel zu holen, da wird lediglich die Farbe beim Hovern festgelegt. Das eigentliche Icon ( fa fa-facebook ) ist in der Schriftart "font awesome" hinterlegt. Kununu ist nun leider nicht sooooo bekannt und daher haben die kein eigenes Icon in der Schriftart..

Wie die sccial media Buttons eingebunden sind, kann man z.B. hier sehen :  https://startbootstrap.com/previews/freelancer/

Ich habe das jetzt einfach so gelöst

<li class="social-kununu"><a href="https:/www.xxxxxxx" target="_blank"><img src="img/kun.jpg"/></a></li>

Hätte ich auch gleich drauf kommen können

Gruß

Jens

0 Punkte
Beantwortet von computerschrat Profi (22k Punkte)

Hallo Jens,

schau dir mal input type='image' an:

https://www.w3schools.com/tags/att_input_type_image.asp

Gruß computerschrat

...