Pictogrammen

Bootstrap Studio wordt geleverd met een rijke bibliotheek met gratis, gebruiksklare pictogrammen. Zij zijn volledig aanpasbaar, werken in alle webbrowsers en zijn mooi scherp op hoge dpi schermen.

Basis

Sleep een Icoon-component van het Componentenpaneel naar het werkgebied. Dubbelklik erop om de Icon-browser te openen.

In dit dialoogvenster kunt u bladeren alle beschikbare pictogrammensets in de vervolgkeuzelijst linksboven en zoek naar pictogrammen op naam.

Selecteer een van de pictogrammen in het dialoogvenster en klik op de knop Opslaan (of dubbelklik op het pictogram). Het onderdeel Icoon zal de verandering weerspiegelen.

Pictogrammen aanpassen

Afhankelijk van de geselecteerde pictogrammenset, kunnen de pictogrammen op SVG zijn gebaseerd (Bootstrap-pictogrammen, Tabler-pictogrammen) of op weblettertypen (Font Awesome, Materiaalpictogrammen). Er zijn kleine verschillen tussen de twee typen, maar over het algemeen kunnen beide worden aangepast via eenvoudige CSS.

Tot verander de grootte en kleur van een pictogram, gebruik de font-size en color opties in het Appearance panel. Hier is een voorbeeld van een gestileerd pictogram:

Hetzelfde geldt bij het schrijven van CSS in onze CSS-editor. Overschrijf gewoon de font-size en color eigendommen.

.mijn-icoon {
  font-size: 20px;
  color: #1234af;
}