Search Results for "image"

...We recommend using a width: 1em (and optionally height: 1em) for easy resizing via font-size. Embed your icons within the HTML of your page (as opposed to an external image file). Here we’ve used a custom width and height. Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., toggles is #toggles). SVG sprites allow you to reference an external file similar to an <img> element, but with the power of currentColor for easy theming.

...Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility. At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options. All elements that have a data-feather attribute will be replaced with SVG markup corresponding to their data-feather attribute value. See the API Reference for more information about feather.replace().

Reference the fonts.css stylesheet automatically loads a range of icon fonts that you can use. Icons are added automatically through CSS using the :before feature in CSS, so they will appear before whatever piece of text you associate them with. To make this association, you need to include particular class and data-icon attributes in the relevant HTML element. This version brings the most user-facing changes in several years as we've added in far more "common" icons and simplified the font...

...The easiest way to consume these icons is to npm install from github and use your favorite toolchain to build fonts or sprites. You'll need to use the svg like you do any other image asset. Exactly how will depend on what you're using in your build process.