Ikoner

Bootstrap Studio kommer med ett rikt bibliotek med gratis, redo att använda ikoner. De är helt anpassningsbara, fungerar i alla webbläsare och är snygga och skarpa på skärmar med hög dpi.

Grunderna

Dra och släpp en "ikon"-komponent från komponentpanelen till scenen. Dubbelklicka på den för att öppna webbläsaren Ikon.

I den här dialogrutan kan du bläddra alla tillgängliga ikonuppsättningar från rullgardinsmenyn uppe till vänster och sök efter ikoner efter namn.

Välj en av ikonerna i dialogrutan och klicka på knappen Spara (eller dubbelklicka bara på ikonen). "Ikon"-komponenten kommer att spegla förändringen.

Anpassa ikoner

Beroende på den valda ikonuppsättningen kan ikonerna vara SVG-baserade (Bootstrap Icons, Tabler Icons) eller webbfontbaserade (Font Awesome, Material Icons). Det finns små skillnader mellan de två typerna men i allmänhet kan båda anpassas via enkel CSS.

För att ändra storlek och färg på en ikon, använd alternativen font-size och color i Utseendepanelen. Här är ett exempel på en formaterad ikon:

Detsamma gäller när du skriver CSS i CSS-redigeraren. Åsidosätt bara egenskaperna font-size och color.

.my-icon {
  font-size: 20px;
  color: #1234af;
}