Opus buttons can carry an icon before or after their text. No icon font is loaded for this: the drawings come from an SVG sheet, and you can add your own.
The sheet
The Icons tab shows the available icons. Opus keeps no catalogue of its own: it reads the template's sheet if there is one, as with Corpus, otherwise its own. An icon added to the Corpus sheet therefore appears in Opus without a new release of the module.
The sheet is there to see the drawings before choosing: a button's Icon field, behind its cog, offers the same names in a list. A click on a drawing copies its name, useful for a custom CSS rule.
Adding an icon
- In Add an icon, give a Name: letters, digits and hyphens.
- Choose the File in the media manager.
- Save and see my icons: the icon appears in My icons, and in the Icon field of every button in the module.
Two lines with the same name: only the first can be used. Opus flags it.
A stencil, not an image
The file is not displayed as an image: it is used as a stencil. Only its shape is kept, and it is filled with the colour of the button's text. What matters is therefore not the colour of the drawing but its transparency.
| Format | What it gives |
|---|---|
| SVG | Vector, sharp at every size. The best choice. |
| PNG, WebP, AVIF, GIF | Sharp at their own size, provided they have a transparent background. Square, at least 64 pixels a side. |
| JPEG | No transparency: always gives a solid square. To be replaced. |
SVG only appears in the media manager once it has been added to the allowed extensions, in the Media options.
What an SVG must respect
- A
viewBoxattribute on thesvgtag. Without it, the stencil comes out empty: it is the first thing to check when an icon does not show. - Filled shapes. A path that only exists through its outline leaves nothing: convert outlines to shapes in your drawing software.
- Text converted to paths, and flattened layers, with no hidden layer.
- One colour, any colour: it will be replaced. Gradients, shadows and partial transparency rarely give what you expected.
- No embedded bitmap, no linked font, no script: they are ignored.
- A drawing that holds up at 16 pixels: look at it small before keeping it.
Where to find free icons
The tab offers a list of sites, with their licence. "Free of charge" does not mean "free to use": a set under MIT, ISC or Apache 2.0 can be used without owing anything, including on a client's site; the others require crediting the source, or paying. Check the licence of the icon you pick, it may differ from the site's.
Up to date for Opus 1.5.