[DOCU-529] Modify the macros for the icons (node, folder, ...) in order to use images instead of the web-font Created: 24/Jul/14 Updated: 21/Jul/15 Resolved: 25/Jul/14 |
|
| Status: | Closed |
| Project: | Documentation |
| Component/s: | None |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Task | Priority: | Neutral |
| Reporter: | Christoph Meier | Assignee: | Christoph Meier |
| Resolution: | Fixed | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Template: |
|
| Acceptance criteria: |
Empty
|
| Task DoR: |
Empty
|
| Visible to: |
Aleksandr Pchelintcev, Andreas Weder, Antti Hietala, Ben Price, Bill Beardslee, Boris Kraft, Brian Warrick, Cheng Hu, Christian Ringele, Christopher Justice, Christopher Zimmermann, Christoph Meier, Chunhua Liu, Daniel Lipp, Dominik Steinacher, Eric Hechinger, Espen Jervidalo, Evzen Fochr, Federico Grilli, Gavan Stockdale, Gökhan Mermer, Imported from previous wiki, Isabelle Dubach, Jana Štěpánů, Jan Haderka, Jan Schulte, Jaroslav Simak, Jose Maria Ruiz, Karel de Witte, Lars Fischer, Laura Gambell, Magnolia International, Magnolia International, Miguel Abreu, Mikaël Geljić, Milan Divilek, Monica Ullrich, Natascha Desmarais, Natascha Natum, Nicole Fior, Ondrej Chytil, Pascal Mangold, Peili Liang, Pete Ryland, Philip Mundt, Philipp Bärfuss, Richard Gange, Robert Šiška, Roman Kovařík, Samuel Schmitt, Samuel Staehelin, Sebastian Stang, Steph Chau, Teresa Miyar, Tobias Mattsson, Tomáš Gregovský, Veronika Altenbach, Vikram Vaswani, Zak Greant, Zdenek Skodik
|
| Description |
|
We use some macros (M5 folder icon, M5 property icon, M5 node icon) in config-trees to show icons. |
| Comments |
| Comment by Christoph Meier [ 24/Jul/14 ] |
|
Having a closer look at the "problem" it came out that is was "just" a css-problem. There is some css for these icons:
@font-face {
font-family: 'MagnoliaIcons';
src:url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.eot?9c7rq');
src:url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.eot?#iefix9c7rq') format('embedded-opentype'),
url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.woff?9c7rq') format('woff'),
url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.ttf?9c7rq') format('truetype'),
url('//documentation.magnolia-cms.com/download/attachments/57189487/MagnoliaIcons.svg?9c7rq#MagnoliaIcons') format('svg');
font-weight: normal;
font-style: normal;
}
The above css is correct. It is in the css of the documentation workspace. A similar - piece of css is in the wiki GLOBAL css. Anyway: (Probably?) the DOCS-space-css is not used (or it used somewhere else). |
| Comment by Christoph Meier [ 25/Jul/14 ] |
|
In the GLOBAL css of wiki there is:
@font-face {
font-family: "Mag-Icons";
src: url("//dev.magnolia-cms.com/fonts/Mag-Icons.woff") format("woff");
}
This css is used e.g. for the macros in the DOC-space which renders the icons ("M5 folder icon", "M5 property icon", "M5 node icon"). Both css, the one in GLOBAL and the one in DOC -space refer to the same web-font. When comparing the 2 css @font-face directives, there are 2 difference:
So, to be on the safe side, i propose to do the following:
@font-face {
font-family: "Mag-Icons";
src:url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.eot?9c7rq');
src:url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.eot?#iefix9c7rq') format('embedded-opentype'),
url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.woff?9c7rq') format('woff'),
url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.ttf?9c7rq') format('truetype'),
url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.svg?9c7rq#MagnoliaIcons') format('svg');
}
The webfont-files are on wiki: http://git.magnolia-cms.com/gitweb/?p=magnolia_ui.pub.git;a=tree;f=magnolia-ui-vaadin-theme/src/main/resources/VAADIN/themes/magnolia/fonts. Finally, we can remove the directive in the DOC-space-css (and must fix the css for the Icons-page) |
| Comment by Christoph Meier [ 25/Jul/14 ] |
|
The above mentioned changes for the GLOBAL css has been done! (thnx to Greg).
@font-face {
font-family: "Mag-Icons";
src:url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.eot?m23pt3');
src:url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.eot?#iefixm23pt3') format('embedded-opentype'),
url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.woff?m23pt3') format('woff'),
url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.ttf?m23pt3') format('truetype'),
url('//dev.magnolia-cms.com/fonts/MagnoliaIcons.svg?m23pt3#MagnoliaIcons') format('svg');
}
Note "query-params" at the end of the files (?m23pt3) have been copied from the latest version of magnolia-icons.scss (see on git: http://git.magnolia-cms.com/gitweb/?p=magnolia_ui.pub.git;a=blob;f=magnolia-ui-vaadin-theme/src/main/resources/VAADIN/themes/magnolia/magnolia-icons.scss;h=b82e2bf0409136052a6ab3b899740ba661b8edf1;hb=HEAD) And the css in the DOC-space is updated, too. https://documentation.magnolia-cms.com/display/DOCS/Icons works fine, too. Finally the web-font for the icons is coming only from the GLOBAL css.
|