Liste der Anhänge anzeigen (Anzahl: 2)
Integration von Iconfonts im TinyMCE ... Lösung zur Diskussion
Iconfonts find ich klasse, nur die Contao-Integration im Editor gestaltete sich schwierig für mich, da die korrekte Einbindung via zusätzlichen leeren DIVs erfolgen soll und ich keine Ahnung habe wie ich den Editor dazu bewegen soll, solche DIVs einzufügen.
Ich habe es wie folgt gelöst ...
1.
(Kostenloses) Iconset auf IcoMoon erstellt (siehe Attachement)
2.
Dann hab ich mir das mitgelieferte Einbindungs-CSS eines Icons so umformuliert, dass das Icon mittels Pseudoklasse :before (bzw. :after) direkt der entsprechenden Klasse zugewiesen wird (ohne Extra-DIV o.ä.).
3.
(Wer SASS nicht kennt überspringt diesen Punkt)
Auf Basis dieses CSS habe ich mir folgendes SASS geschrieben.
Code:
$icon_class: icon-envelop icon-info icon-lock icon-new-tab icon-chevron-up icon-ok icon-arrow-right icon-home icon-bubble icon-key icon-phone icon-print icon-list-ul icon-user icon-world icon-cog icon-calendar icon-clock icon-chevron-down icon-chevron-left icon-chevron-right icon-pencil icon-remove icon-checkmark-circle icon-cancel-circle icon-remove-2 icon-exclamation-sign icon-upload icon-download icon-unlocked icon-email icon-star;
$icon_content:"\e000" "\e001" "\e0a5" "\e002" "\f077" "\f00c" "\e003" "\e004" "\e005" "\e006" "\e007" "\e008" "\f0ca" "\e009" "\e00a" "\e00b" "\e00c" "\e00d" "\f078" "\f053" "\f054" "\e00e" "\e00f" "\e010" "\e011" "\f00d" "\f06a" "\e012" "\e013" "\e014" "\e015" "\e016";
$icon_order: before before before after before before before before before before before before before before before before before before before before before before before before before before before before before before before before;
.icon-envelop, .icon-info, .icon-lock, .icon-new-tab, .icon-chevron-up, .icon-ok, .icon-arrow-right, .icon-home, .icon-bubble, .icon-key, .icon-phone , .icon-print, .icon-list-ul, .icon-user, .icon-world, .icon-cog, .icon-calendar, .icon-clock, .icon-chevron-down, .icon-chevron-left, .icon-chevron-right, .icon-pencil, .icon-remove, .icon-checkmark-circle, .icon-cancel-circle, .icon-remove-2, .icon-exclamation-sign, .icon-upload, .icon-download, .icon-unlocked, .icon-email { font-weight:normal; }
@include font-face('icomoon', font-files('icomoon.ttf','icomoon.woff','icomoon.svg','icomoon.eot'));
$i:1;
@each $class in $icon_class {
.#{$class}:#{nth($icon_order, $i)} {
content:nth($icon_content, $i);
@if nth($icon_order, $i) == before {
margin-right:0.3em;
} @else {
margin-left:0.3em;
}
font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;
}
$i: $i+1;
}
Da es in SASS keine Arrays gibt, nutze ich SASS-Listen (hier gefunden).
Wenn man ein anderes Iconset benutzen möchte, müssen die vier ersten Zeilen einmal händisch neu geschrieben werden.
Zeile 3: Die Liste $icon_order benutze ich da ich einzelne Icons mittels :after einfügen möchte (z.B. ein Icon welches externe Links markiert).
Zeile 4: Diese Klassen werden benötigt, da der TinyMCE Formatwähler sonst nichts anzeigt.
4.
Daraus wird folgendes CSS erzeugt, welches ich in meinem Frontend-CSS und im tinymce.css integriere (meine tinymce.css liegt im selben Ordner wie die screen.css damit die Pfade zu den CSS-Resourcen dieselben bleiben).
Code:
/* line 5, K:/xampp/htdocs/dev/efcc/files/theme/sass/_icons.scss */
.icon-envelop, .icon-info, .icon-lock, .icon-new-tab, .icon-chevron-up, .icon-ok, .icon-arrow-right, .icon-home, .icon-bubble, .icon-key, .icon-phone, .icon-print, .icon-list-ul, .icon-user, .icon-world, .icon-cog, .icon-calendar, .icon-clock, .icon-chevron-down, .icon-chevron-left, .icon-chevron-right, .icon-pencil, .icon-remove, .icon-checkmark-circle, .icon-cancel-circle, .icon-remove-2, .icon-exclamation-sign, .icon-upload, .icon-download, .icon-unlocked, .icon-email {
font-weight: normal;
}
@font-face {
font-family: "icomoon";
src: url('/files/theme/fonts/icomoon.ttf') format('truetype'), url('/files/theme/fonts/icomoon.woff') format('woff'), url('/files/theme/fonts/icomoon.svg') format('svg'), url('/files/theme/fonts/icomoon.eot') format('embedded-opentype');
}
/* line 12, K:/xampp/htdocs/dev/efcc/files/theme/sass/_icons.scss */
.icon-envelop:before {
content: "\e000";
margin-right: 0.3em;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
/* line 12, K:/xampp/htdocs/dev/efcc/files/theme/sass/_icons.scss */
.icon-info:before {
content: "\e001";
margin-right: 0.3em;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
// hier folgen jetzt noch nen Haufen Icon-Klassen
(Unkomprimiert zwecks Lesbarkeit.)
5. Ergebnis: Icons lassen sich im Editor zuweisen, und werden natürlich auch im Frontend angezeigt, siehe Anhang 10959
---
Und nun hätt ich gern Eure Kritik/Meinung/Erfahrung/Anregung/Alternativ-Lösung:
Es scheint alles gut zu funktionieren, allerdings habe ich mit Sicherheit irgendwas nicht bedacht, der von IcoMoon vorgegebene DIV hat bestimmt seinen Grund. ;)
