Styling with CSS
For each instance of an individual SVG icon we're going to have an svg tag and a use tag. It should look like this:
<code><svg class="glyph signia paper-plane"><use xlink:href="#signia-paper-plane"></use></svg></code>
With the main Glyphs.co script installed in your header, the above tag will have the SVG data replicated into it and the end result will be something like this:
Take note that there are 3 classes assigned to the SVG. The glyph class applies to all of the icons, with some basic styling for size, positioning, layout, etc. The second class is the icon set class. For this paper plane icon, its icon set class is signia. The last class is the individual icon class: paper-plane.
You can use the individual icon class (paper-plane in the example) to select and style specific icons, the set class (signia to style an entire set, the glyph class to specify all Glyphs.co icons or any combination of those classes to hit a specific icon if you have a lot of similar icons.
The Base CSS
Because we're using the svg use tag, we have a few fancy CSS classes applied to each of our icons to help styling behave as you would expect. We use the currentColor variable in CSS to control the color of the stroke and fill, and most icons have stroke set to inherit so that by setting a stroke-width on the outer svg element (with the classes above) that will cascade to all of the strokes in that icon (for sets where this is available).
To be more exact, all of our icons currently start with this default styling:
.glyph{
fill:currentColor;
display:inline-block;
margin-left:auto;
margin-right:auto;
position:relative;
text-align:center;
vertical-align:middle;
width:70%;
height:70%;
}
.glyph.sm{width:30%;height:30%;}
.glyph.md{width:50%;height:50%;}
.glyph.lg{height:100%;width:100%;}
.glyph-svg{width:100%;height:100%;}
.glyph-svg .fill{fill:inherit;}
.glyph-svg .line{stroke:currentColor;stroke-width:inherit;}
Please note that this default styling may change during our beta period, which may affect the styling of icons on your site.
When you add a Glyphs.co icon to your site, it will automatically be sized at 70% the height and width of its container. There are some classes we've built-in to change that default size: sm, md, lg. Adding one of those three classes to the SVG class of your icons will change its size to be 30%, 50% or 100% respectively. If you want a different size, you can specify so in your own CSS file.
Basic CSS Color Options
There are a few basic CSS properties that will enable you to quickly and effectively style your SVGs for your site. These properties are fill, stroke, and stroke-width. Not all of our icons sets can use these properties. Our pre-colored icon sets, for example, have the color and stroke styling built-in to each SVG, so you won't be able to adjust them in the CSS like this. To see what options are available for an icon set or an individual icon, view the Icon set or Icon Details. (in the sidebar). For example: https://glyphs.co/icons/signia or https://glyphs.co/icons/signia-grab-tool.
If the icons you choose allow for color changes, you can use the fill, stroke, and stroke-width properties to style your icons like this:
.glyph.signia.paper-plane{
fill:#FF0066;
stroke:#000000;
stroke-width:1%;
}
Which looks like this:
