Rating Stars mit Font Awesome?

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Post Reply
Harald Weingaertner
Regular
Posts: 474
Joined: Mon Mar 27, 2006 12:32 am

Rating Stars mit Font Awesome?

Post by Harald Weingaertner »

Hallo,

leider bin ich zu lange raus und werde schneller alt als befürchtet. Ich bekomme es nicht hin :(

Ich setze derzeit das clean-blog Template ein, das ja auch Symbole des "Font Awesome" anzeigen kann. Ich wollte nun gerne unter meine Beiträge 3 Dinge posten und diese dann mit Sternen bewerten. Z.B.

Grafik: *****
Sound: ***
Installation: **

Das wollte ich zuerst über Grafiken regeln, bis ich dann auf das "Font Awesome" gekommen bin. Ich schaffe es zwar mit Beispielen wie hier die Sterne einzubinden, das ist so aber zu kompliziert. Auch weil der Code zum Einbau der Sterne im Editor nur im Quelltext erscheint und beim nochmaligen Editieren weg ist.

Hat vielleicht jemand eine Idee, wie sich sowas realisieren lässt?

Und bei den Sternen wollte ich auch halbe Sterne nutzen können.

Entweder bin ich inzwischen echt zu alt oder mir fehlt irgendein Schritt, den ich übersehen habe.

Falls mir jemand dafür einen Tipp geben könnte, wäre ich dankbar.

Danke, Harald

PS: Die Sterne sollen nur fix angezeigt werden und man soll als Besucher nicht "raten" können.
ICE
Regular
Posts: 240
Joined: Tue Jun 28, 2005 11:15 pm

Re: Rating Stars mit Font Awesome?

Post by ICE »

Ja, die Font Awesome Sachen werden leider vom CKEditor entfernt. Mir ist aber aufgefallen, dass der CKEditor die Font Awesome Sachen drin lässt, wenn man z.B. das   (Das ist ein HTML-Leerzeichen) hinzuschreibt:

Aus:

Code: Select all

<i class="fa fa-star-o"></i>
Wird:

Code: Select all

<i class="fa fa-star-o">&nbsp;</i>
Das bleibt dann drin ...

Für die Sterne suchst Du Dir über die Font Awesome Webseite den jeweiligen Code: http://fortawesome.github.io/Font-Awesome/icons/

Mit der Suche nach "Star" findet man dann z.B:

Einen vollen Stern:

Code: Select all

<i class="fa fa-star">&nbsp;</i>
einen leeren Stern:

Code: Select all

<i class="fa fa-star-o">&nbsp;</i>
einen halben Stern:

Code: Select all

<i class="fa fa-star-half-o">&nbsp;</i>
Sooo kompliziert ist das eigentlich nicht. Für die Sterne musst Du Dir ja nur die drei Vorschläge merken, oder in einem Entwurfsbeitrag abspeichern.

Sollen die Sterne größer sein, so musst Du noch das fa-2x bis fa-5x in die class schreiben, z.B. so

Code: Select all

<i class="fa fa-star fa-5x">&nbsp;</i>
Siehe auch: http://fortawesome.github.io/Font-Awesome/examples/
Harald Weingaertner
Regular
Posts: 474
Joined: Mon Mar 27, 2006 12:32 am

Re: Rating Stars mit Font Awesome?

Post by Harald Weingaertner »

Danke ICE,

das bringt mich schonmal weiter. Ich glaube mein Problem ist eine Kombination aus den Sternchen und dem Editor, der meinen Code immer wieder entfernt. (siehe hier)

Selbst der CKeditor 4.4.8 macht aus

<i class="fa fa-star">&nbsp;</i><i class="fa fa-star">&nbsp;</i><i class="fa fa-star">&nbsp;</i><i class="fa fa-star">&nbsp;</i>

nach dem Speichern (bzw. Vorschau) ein <em>&nbsp;</em><em>&nbsp;</em><em>&nbsp;</em><em>&nbsp;</em>

Wie ich also 4 Sterne hinbekomme, habe ich Dank Deiner Antwort kapiert. Jetzt würde mich das nur noch interessieren wie ich dem Editor beibringe diesen Code nicht dauernd wieder zu entfernen. Als Editor nutze ich laut "?" den CKEditor 4.4.8 (revision ccd0038).

Vielleicht weißt Du dazu auch nochmal einen Tipp?

Danke Dir, Harald
ICE
Regular
Posts: 240
Joined: Tue Jun 28, 2005 11:15 pm

Re: Rating Stars mit Font Awesome?

Post by ICE »

Ja, hast Du den CKEditor denn als plugin nachinstalliert? Wann ja, dann kannst Du unter plugins dort den CKEditor auswählen und dort die Einstellung "Stelle Advanced-Content-Filter (ACF) ab?" auf JA setzen. Dann sollte er die <i> Sachen auf jeden Fall drinlassen, so wie oben beschrieben. In meinen beiden S9Y Blogs klappt es damit.
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Rating Stars mit Font Awesome?

Post by Timbalu »

Entweder ACF ausschalten - oder per http://board.s9y.org/viewtopic.php?f=4& ... #p10442876 (geht beides über config Änderung auch im Core CKE).
Wie das update sicher geht, ist in dem genannten file auch beschrieben. Allerdings muss man dann manuell ab und an auch überprüfen, ob ein Update nicht doch etwas wichtiges im Original geändert hat.
Der PLAIN Text Editor sollte nicht beteiligt sein.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian
Harald Weingaertner
Regular
Posts: 474
Joined: Mon Mar 27, 2006 12:32 am

Re: Rating Stars mit Font Awesome?

Post by Harald Weingaertner »

Danke euch beiden. Jetzt klappt das mit dem Workaround mit den &nbsp; zwischen den <i> </i>.
Post Reply