Use of pictograms to illustrate links
Version 2.2.0 of plugin Directory of links lets you choose a pictogram (icon) for a link illustration from a font available in the graphic charter.
Integration
Each graphic charter using fonts can be listed in a file skin/ [NOM_SKIN]/conf/fonts.xml the (relative) path to CSS files containing fonts.
Example of a fonts file.xml
<files> <!-- Configure here the CSS files containing fonts (enter the relative path from resources folder of the skin) --> <!-- The CSS files should contain the @font-face rule --> <!-- <file>fonts/icomoon.css</file> --> <!-- Files in skin -> <file>fonts/icomoon.css</file> <file>fonts/AmetysIcon.css</file> <file>fonts/FontAwesome.css</file> <!-- Files in FontAwesome Free 5.12.1 plugin --> <file plugin="fontawesome-free">css/ametys-solid.css</file> <file plugin="fontawesome-free">css/ametys-brands.css</file> <file plugin="fontawesome-free">css/ametys-regular.css</file> <!-- Files in FontAwesome 5.12.1 plugin --> <file plugin="fontawesome">css/ametys-solid.css</file> <file plugin="fontawesome">css/ametys-brands.css</file> <file plugin="fontawesome">css/ametys-light.css</file> <file plugin="fontawesome">css/ametys-regular.css</file> </files>
To be taken into account, CSS font files must contain the @font-face rule and all fonts.
Example of a CSS file that will be correctly taken into account
@font-face {
font-family: 'icomoon';
src: url('icomoon.eot?3nwr9c');
src: url('icomoon.eot?3nwr9c#iefix') format('embedded-opentype'),
url('icomoon.ttf?3nwr9c') format('truetype'),
url('icomoon.woff?3nwr9c') format('woff'),
url('icomoon.svg?3nwr9c#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icomooon-date:before{
font-family: 'icomoon';
content: "\e902";
}
.icomooon-faq:before{
content: "\ea0a";
font-family: icomoon;
}
.icomooon-mail:before{
content: "\e90c";
font-family: 'icomoon' !important;
} Charter heritage
From Ametys 4.3.0
Missing file
As the generic inheritance rule indicates, if the file is absent, the file from the parent charter is used.
Heritage
If the file is present it will be mixed with the parent chart file according to the following rules:
- parent and current charter files are added
Blocking inheritance
By default, inheritance applies, but if the file has the attribute inherit="false", then only the local file is used.
<?xml version="1.0" encoding="UTF-8"?> <files inherit="false"> ... </files>
Use
In the window for adding or modifying a link, click on "Pictogram ..." in the menu for choosing the thumbnail.
Then select the pictogram from those available in the graphic charter.
If you know the name of the CSS class associated with the icon you're looking for, you can use the search filter:
If the "Pictograms..." menu is not visible, it's because your graphic charter does not contain CSS with fonts, or because your charter is not correctly configured (see previous paragraph).
Back to top