WordPress
menu
close
search
forward
back
collapse
expand
language
logout
login
external-link
download
share
positive
negative
check
Figma
Docs
Sprite
The SVG sprite is bundled directly with the custom theme at assets/icons.svg. The SVG contains all icons as <symbol> and <view>, which enables universal use in HTML and CSS.
Individual symbols from the sprite are referenced by their ID. In HTML this is done using <use> and the icon’s ID.
<svg>
<use href="#ICON-ID"></use>
</svg>If the icons are to be loaded as a CSS background-image, the ID must be modified with the suffix -view to avoid conflicts with the symbol IDs.
.element {
background: url('icons.svg#ICON-ID-view')
}Favicons
WordPress offers a way to set the favicon via the backend. This feature is not sufficient for us, so we have created an optimization option in the custom theme:
- Create the favicon and export it as SVG (our figma file offers a template)
- Use the Favicon GeneratorOpens in new tab to generate the required graphics.
- Use the favicon.png file at 512px × 512px for the WordPress internal favicon and upload it in the backend under »Settings → General«.
- Copy the files in the folder – except »favicon.png« and »favicon.svg« – into the custom theme folder »/assets/appicons«, overwriting any existing files with the same name.
- If the files already present in the »appicons« folder have different names, either adjust the names of the new files to match the old naming convention, or delete the original files and update the favicon filenames in the files »site.manifest« and »appicons.php«.
- Update the name and shortname in site.webmanifest
- Body text that should be broken up with additional subheadings or visual elements once it reaches a length of roughly 300 words. The text may include all common formatting options such as bold, italic, or strikethrough; links, lists, or highlighted sections are also possible. If the text is SEO-relevant, it should incorporate the page’s primary keyword in a natural and varied way—for example, through the use of synonyms. Meaningful internal and external links, as well as the use of the keyword in subheadings, are likewise recommended.