The generated style.css defines the font face
safe-icons.
You can either copy the contents of style.css to your
own CSS or link to it in your HTML like so:
<link rel="stylesheet" href="style.css"> <link rel="preload" href="fonts/safe-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
The second line is for enabling early font downloads.
This code assumes style.css is located in the same directory as the HTML file linking to it. You may need to adjust the value of
href and the URLs used within style.css depending on
where you place the generated files in your setup.
Use the CSS class icon to apply the generated font to
any text:
<span class="icon"></span>
You could change the size of the glyph using the
font-size property in CSS:
.my-size {
font-size: 2em;
}
<span class="icon my-size"></span>
You can specify which color palette to use like so:
<span class="icon palette0"></span>
You could also customize a palette in CSS:
@font-palette-values --custom {
font-family: "safe-icons";
base-palette: 0;
override-colors: 0 #f00, 1 blue, 2 #bada55;
}
.custom {
font-palette: --custom;
}
<span class="icon custom"></span>