1/4/2023 0 Comments Webfont symbols![]() ![]() You can even add these icons directly to your site using the CDN version of the stylesheet. #WEBFONT SYMBOLS FREE#Naturally they’re totally free and available on GitHub. The Ionic team decided to release their icons as a webfont called Ionicons. Native devs love the Ionic Framework and it’s one of the most popular choices for web-to-mobile apps. I absolutely recommend this icon font for any type of website, commercial or otherwise. ![]() MFG Labs icons have a unique style that stands out from the herd. This is fully semantic in all browsers and helps to reduce clashes against other CSS code. It’s completely free and hosted on GitHub for the world to access.Įach icon comes packed with standard webfont formats using Unicode PUAs in CSS. One of the newer fonts in this list comes from MFG Labs with their own icon set. To learn more about installation and customizing the icons you should read through the FAQ page and visit the main GitHub repo. So if you don’t need social media icons you can reduce the font file size by quite a bit.Įntypo comes with over 400 icons and a brilliant CC sharealike license. The fonts also split into two packs: the main pack and the social pack. New icons are added sporadically and they’re very simple to access. These icons are superb and they’re top of the line when it comes to freebies. The webfont icon family Entypo has been around for quite a few years. This makes the icons far easier to use, but they can also blend into the site with a more “generic” style. I do recommend this webfont if you’re okay with simpler designs. #WEBFONT SYMBOLS DOWNLOAD#The main Zondicons download link comes right from the website, so it’s hard to tell if they’ve ever been updated or if new icons were added. #WEBFONT SYMBOLS UPDATE#Unfortunately these aren’t hosted on GitHub so they don’t have an update archive.īut you can see all of the examples on the demo page including which CSS classes you need to get them working properly. Zondicons are totally free and real easy to add into your site. #WEBFONT SYMBOLS CODE#They can even work for iOS with some minor adjustments and special code snippets. This means you can include the icons directly into your site and even make edits to them as needed.įew people know about Typicons but it’s one of the better icon web fonts available. The pack is completely free and also available on GitHub. It comes with 330+ unique icons all with a similar style. With rounded corners and simpler outlines, the Typicons set is perfect for any site. If you need a simple, lightweight icon font then Octicons won’t let you down. But they’re just simple enough that they can work on pretty much any interface. These icons can be found scattered throughout the GitHub website. This free icon set is currently in version 5.0 and includes dozens of icons with some basic symbols. GitHub recently open sourced their own icon pack called Octicons. It’s best used on creative sites where a hand-drawn style fits with the layout. This makes them stand out far above the other more generic icon sets.īut I don’t think Captain Icon works for every project. Each icon has a very unique design, and they’re all hand drawn from scratch. What I like most about this icon pack is the style. It’s a totally free open source project hosted on GitHub with vector files and web fonts. ![]() My personal favorite web font is the Captain Icon pack created by designer Mario del Valle. I hope you find it useful.UNLIMITED DOWNLOADS: 1,500,000+ Icons & Design Assets It works in all browsers from IE8 and degrades well in IE6 and IE7. Using webfont icons is a simple and elegant solution to a long-standing problem … designers never want standard bullet points. The icons will appear where you want them and match the size of the list text. It’s also possible to set differing color, font-size and spacing properties. View the webfont icon bullet point demonstration page… I’ve used 1.4em but you can change that to make the space between the icon larger or smaller as necessary: ul. We’ll then set a negative text-indent on each li to move the first line of each list item back. Next, we’ll set list-style-type to none to remove the standard bullet points. We’ll add a class of icon to the ul tag and, optionally, we can apply different classes to each li tag to set different icons: item 1 item 2 item 3 ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |