Zum Hauptinhalt

ContactOpens in new tab

Icons

We have integrated a set of basic icons. Each icon has been given a semantic name to ensure clear functional assignment in the context of accessibility.

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:

  1. Create the favicon and export it as SVG (our figma file offers a template)
  2. Use the Favicon GeneratorOpens in new tab to generate the required graphics.
  3. Use the favicon.png file at 512px × 512px for the WordPress internal favicon and upload it in the backend under »Settings → General«.
  4. 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.
  5. 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«.
  6. Update the name and shortname in site.webmanifest
  7. 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.
Back to top