font-awesome-icon in Menu-Punkt

Antworten
#1
12.12.2017 11:25
avatar  uwb
#1
avatar
uwb

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
#2
14.12.2017 20:23 (zuletzt bearbeitet: 14.12.2017 20:26)
avatar  az_
#2
avatar
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


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!
Forenspende

 

Spenden über PayPal

Ein Forum zu betreiben, erfordert ein hohes Maß an Zeit, Kraft und Aufmerksamkeit. 

Das Team von Jimdo-Forum arbeitet hinter den Kulissen sehr engagiert daran,
die erforderlichen Aufgaben zu erfüllen, um dir und den
anderen Forenmitgliedern ein tolles Forenerlebnis zu ermöglichen.

 Wir freuen uns, dass du dich dazu entschlossen hast, unser Forum mit deiner Spende zu unterstützen!

...hier ist der direkte Spendenlink
für unsere Kaffeekasse!