Kraken includes support for both SVG icons and icon fonts. As an emerging best practice, it's strongly recommended that you use SVG.
-Note: Because of namespacing conflicts, you cannot use SVG and icon fonts together by default. If you plan on using both, change the class names for at least one of them to avoid conflicts.
- - - -Kraken's build system will generate an SVG sprite from individual SVG files. Alternatively, you can use IcoMoon to generate an SVG sprite for you.
+Kraken's build system will generate SVG sprites from individual SVG files.
Include the contents of your SVG sprite as a hidden element directly after the opening <body> tag.
<svg xmlns="http://www.w3.org/2000/svg" hidden>
<symbol id="icon-logo" viewBox="0 0 100 100">
@@ -69,18 +56,7 @@ SVG Sprites
</svg>
<span class="icon-fallback-text">Tweet This</span>
IcoMoon is an incredible app for building custom icon fonts.
-Add icons to your markup by applying the .icon class to an empty <span> tag, as well as the name of the icon prefixed with .icon-.
<span class="icon icon-logo"></span>
-While icon fonts are well supported, some browsers—most notably Opera Mini—have issues with them. Kraken comes with icon font support detection that adds a .font-face class to the <html> element if supported.
If an icon is more than decorative, always include supporting text in a <span> with the .icon-fallback-text class. This text will display when icon fonts are not supported by the browser, and is accessible screen readers.
<span class="icon icon-twitter"></span>
-<span class="icon-fallback-text">Tweet This</span>
-Learn more about icon fonts in this guide for beginners.
+Kraken 6 brings only one major change: dropped icon font support. SVG is the way forward.
+Most of the changes from Kraken 4 to Kraken 5 were class name changes and updates to the build process that break backwards compatibility but provide a more flexible foundation for front-end web developers.