SOLVED Need to see Awesome icons in JCE Editor?
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
I really like to be able to see the Awesome icons in Editor mode (JCE).
I have a special css file in the template (Metropolis) especially for the editor —> “jce-editor.css”
I try to add this to the top of
@import "../../../libraries/gantry/assets/jui/less/font-awesome/font-awesome.less";
Not working - I dont see the icons when I’m in the edition mode (editor window)
What are the file I need to target to have a preview of the Awesome font in my editor? - Last Edit: 10 years 1 month ago by Patrick Toulze.
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Just can't work to import a less file into a css file.
Perhaps you can just compile what is in that file manually (let's say via code pen or codekit) and copy the resulting css into the css file you created for JCE.
Not sure tho if that works ... you need to make sure the font gets loaded.
Keep in mind the paths need to be relative to the css file.
But I haven't used JCE for years ...
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Bingo... Thanks a Thousand times Henning.
1— I compiled this file—> libraries/gantry/assets/jui/less/font-awesome.less to a css file (name jce-awesome.css) With Crunch - A free App (work with Adobe Air)
2— I put the compiled css file in the css folder of my template (Metropolis) (at the same level of my special jce-editor.css file and add this to the top
@import "jce-awesome.css";
Now I can see my Awesome icons right in my editor.
Great Stuff...
SOLVED ! - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
- Trying to do the same with Gantry 5 - No success so far ?
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
to be honest I'm really unfmailiar with JCE. I don't use it at all.
I tred to import
media/gantry5/assets/css/font-awesome.min.css
into that JCE field for custom css files ... didnt really work out.
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
I guess not only JCE permit to add a stylesheet to his editor to add canned styles.
I make it work with Isotope.
2 METHODS
Method 1 —
Advantage: jce-editor.css (and other link css & font) will only be loaded by JCE when the editor is loaded.
a) Create your special editor style sheet (e,g jce-editor.css)
—> Put it in the media/jce/css (create this “css” folder) and indicate JCE administration the Path/name_off_file
b) Copy the media/gantry5/assets/css/font-awesome.min.css put it in the same media/jce/css folder.
- Note 1: I keep the change the name (see below - Method 2) of font-awesome.min.css to anything different (e.g font-awesome-whatever.min.css), (just to be sure)
c) Copy the media/gantry5/assets/css/font folder put it in the same media/jce/css folder.
d) Change the links to the different type of fonts (eot, woff2. woof, rtf, svg…) inside your font-awesome-whatever.min.css to the path of your copy “font” folder…
Will look like —> /your_path/media/jce/css/fonts/fontawesome-webfont.woff?v=4.5.0
e) Add the import stylesheet code to the top of your special editor style sheet (e,g jce-editor.css)
—> @import "font-awesome-whatever.min.css";
Method 2 —
Disadvantage: jce-editor.css (and other link css & font) will be loaded with template.
a) Create your special editor style sheet (e,g jce-editor.css)
—> Put it in the template/css folder and indicate JCE administration the Path/name_off_file
b) Copy the media/gantry5/assets/css/font-awesome.min.css put it in the same template/css/ folder.
- Note 1: in this case you need to change the name of font-awesome.min.css to anything different
(e.g font-awesome-whatever.min.css), if you don’t you will loose all your frontal & Gantry administration connection with all awesome font as it seem that any stylesheet put in the template/css folder seem to become active and override any other identical name stylesheet.
c) Copy the media/gantry5/assets/css/font folder put it in the same template/css/ folder.
d) Change the links to the different type of fonts (eot, woff2. woof, rtf, svg…) inside your font-awesome-whatever.min.css to the path of your copy “font” folder…
Will look like —> /your_path/media/templates/rt_isotope/css/fonts/fontawesome-webfont.woff?v=4.5.0
e) Add the import stylesheet code to the top of your special editor style sheet (e,g jce-editor.css)
—> @import "font-awesome-whatever.min.css";
Now your Awesome Icons appear directly in your JCE Editor - Cool
I revise, fix the methods - Probably similar with other editors - Last Edit: 8 years 1 month ago by Patrick Toulze.
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
Time to create page: 0.048 seconds