Sådan installeres “stand alone” ikoner i DDB CMS

Jeg har efterhånden lavet en del hacks i DDB CMS for at kunne arbejde med layout af mine sider, herunder opsætning af kolonner og brug af ikoner. Mine hacks har imidlertid været afhængige af den CSS, der er indbygget i temaet DDBasic i Drupal. Men til efteråret får DDB CMS nyt tema og så går alle mine hacks i stykker.

Jeg har heldigvis et trick i ærmet. Nemlig at gøre ikonerne uafhængige af Drupal’s tema. Med “stand alone” mener jeg således ikoner, der kan bruges, selvom der installeres et nyt tema.

Fordele:
Dine ikoner virker uafhængigt af temaet i Drupal. Ikonerne i front end vil altid være opdaterede og optimeres performance-mæssigt.

Ulemper:
Brugerens browser skal downloade mere kode og flere filer, hvilket har indflydelse på performance.

Installér ikon-sættet Font Awesome

Bemærk: Du skal have admin-rettigheder (webmaster plan hos DBC) for at lave dette trick.

1. Installer og aktiver modulet Add to Head.
2. Installer Font Awesome CDN. Få tilsendt en embed kode til din e-mail herfra.
3. Lav en ny profil i “Add to Head” modulet og indsæt heri den tilsendte kode fra Font Awesome.

Font Awesome er nu klar til brug i front end.
– Se dokumentationen ang. brug af classes her.
– Se oversigt over ikoner her.

Hvor er ikonerne i min wysiwyg editor?

Du kan også få vist ikonerne hvor du laver dit indhold, dvs. i wysiwyg editoren CKEditor:

1. Kopiér denne URL: https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css
2. Redigér wysiwyg-profilen for CKEditor i Drupal her: /admin/config/content/wysiwyg/profile/ding_wysiwyg/edit
3. Klik på fanebladet “CSS” nederst på siden. Find feltet “CSS sti”. Her indsætter du et komma efterfulgt af den URL, du lige har kopieret efter den tekst, der allerede står der:
   

Nu er ikonerne også synlige i wysiwyg editoren.

Men CKEditor stripper mine ikoner?

Når du indsætter et ikon i wysiwyg editorens HTML-kildevisning, er du nødt til at indsætte en   i tagget, altså f.eks. <i class=“fa fa-home”>&nbsp;</i>. Hvis tagget er tomt, stripper CKEditor det ud næste gang, du vil arbejde med dit indhold. Det laver desværre et upraktisk mellemrum på højre side af ikonet, men det kan fikses med lidt CSS:

1. Hvis du ikke har gjort det, så installer modulet CSS Injector.
2. Indtast følgende CSS i en ny eller eksisterende regel i CSS Injector:

   i.fa,
   .cke_editable i.fa {letter-spacing: -2px;}
   i.fa-2x,
   .cke_editable i.fa-2x {letter-spacing: -4px;}
   i.fa-3x,
   .cke_editable i.fa-3x {letter-spacing: -6px;}
   i.fa-4x,
   .cke_editable i.fa-4x {letter-spacing: -8px;}
   i.fa-5x,
   .cke_editable i.fa-5x {letter-spacing: -10px;}

3. Temaet Seven bruges i admin-grænsefladen, så CSS’en skal både virke her og i DDBasic temaet. Hold CTRL nede og markér både DDBasic og Seven i feltet “Themes to show on”.
4. CKEditor skal igen håndfodres med CSS’en. Indsæt stien til dit CSS Injector style sheet på samme måde i wysiwyg-profilen som ikonerne her: /admin/config/content/wysiwyg/profile/ding_wysiwyg/edit
   Du skal indsætte:

   ,/files/css_injector/css_injector_3.css

   hvor “css_injector_3.css” er filnavnet på dit style sheet. Filnavnet kan du se under “Lokation” i oversigten under CSS Injector. Det, du nu har indsat i wysiwyg profilen ser sådan ud:
   

Tillykke! Nu kan du bruge 634+ fine ikoner på dit website.