font-awesome-icon in Menu-Punkt

12.12.2017 11:25

uwb
#1

Von Haus aus gibt es meines Wissens bei Jimdo keine Möglichkeit einem Menu-Punkt ein Icon voranzustellen.

Aber es gibt eine Lösung, mit den Icons von font-awesome.

Dazu - nach Ermittlung der ID des gewünschten Menüpunktes - ist im Head-Bereich Folgendes einzutragen:

Zum Einbinden der Font (sicher gibt es auch andere Links dafür):

1
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

CSS:

1
2
3
4
5
6
 

/* home icon statt/plus text */
li#cc-nav-view-1252478062 a { visibility: hidden; } /*weglassen, wenn Icon UND Text erscheinen soll */
li#cc-nav-view-1252478062 a:before { 
     font-family: FontAwesome; 
     content: '\f015'; visibility: visible; }
 

Da ich mich immer noch sehr in den Jimdo- und css-Kinderschuhen bewege bin ich natürlich froh, über allfällige konstruktive Kommentare zu dieser Lösung

Liebe Grüss
uwb

Antworten

Beitrag melden

14.12.2017 20:23 (zuletzt bearbeitet: 14.12.2017 20:26)

az_
#2

az_

...ein Sonderzeichen kannst Du mit folgendem Trick vorstellen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 

 
.jtpl-section-main ul, .jtpl-section-main li {
    list-style-type: none;
    line-height: 1.5;
    margin-bottom: 6px;
}
 
.content-options ul {
    padding: 0 0 0 16px;
}
.mce-content-body li {
    list-style-type: circle !important;
}
 
.char1 li:before {
    content: "\2022" " "; /*bullet*/
    font-weight: bold;
    margin-left: -12px;
}  
 
.char li:before { 
    content: "\003E" " "; /* > */
    font-weight: bold;
    margin-left: -12px;
} 
 

 

html (erst die Liste in Jimdo erstellen und dann nachträglich einklammern):

1
2
3
4
5
 

<div class="char">
    ...
</div>
 
 

oder

1
2
3
4
5
 

<div class="char1">
    ...
</div>
 
 

...die Content-Codes (2022 bzw. 003E) findest Du in der Sonderzeichentabelle des jeweiligen Fonts

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html