Font-Awesome
css.gg
Our great sponsors
Font-Awesome | css.gg | |
---|---|---|
211 | 19 | |
72,973 | 9,533 | |
0.2% | - | |
4.9 | 4.7 | |
17 days ago | 20 days ago | |
JavaScript | SCSS | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Font-Awesome
-
Creating Gradient Buttons with Animated Text using CSS
the i element is the icon of the button, I'm using fontawesome.com for the icon, the class fa-apple retrives Apple icon for us.
-
How to build a Good Portfolio Website - My Approach.
Icons: Fontawesome Development: HTML, SCSS, JavaScript Deployment: Github + Netlify
-
Free Icons for your reactjs and web applications
1. Font Awesome
-
Adding Symbols in text.
For generic icons (i.e. you just need a d6 and not a system-specific d6 option), Foundry has Font Awesome which are easy to search, then copy and insert, and always look good inline.
-
[Accessibility] Points to Consider When Adding aria-label to Icon Font Elements
The following is an example of defining Font Awesome:
-
A Developer’s Guide to Implementing a Design System (Part 1)
Of course, we have many different ways of solving this problem. Some of the most common include pre-existing third-party icon libraries (such as Font Awesome), icons bundled into a third-party component library (like the Kendo UI Icons), or a completely custom set of icons designed and maintained by your design team. Obviously, going 100% custom will require more work (on both the design and dev side), but might be worth it to achieve a truly unique look – or if the UI will require icons for uncommon symbols or concepts.
- GitHub Issue: Add Substack Logo to Font-Awesome
-
Crafting A Minimalist Portfolio Website with SvelteKit and Pico CSS
The featured GitHub projects are dynamically retrieved through the power of the GitHub GraphQL API. The blog posts are seamlessly pulled in using the Dev.to API. Additionally, Redis is used to cache the GitHub and Dev.to API responses for 1 hour to reduce the number of API calls. Icons are provided by Font Awesome through their kit from the CDN. I've also implemented the new View Transition API feature to enhance the user experience.
-
Does Neocities support fontawesome?
Firstly, unlike the name https://fontawesome.com/ isn't for fonts.
- Icon Buddy – 100K+ Open Source SVG Icons, Fully Customizable
css.gg
-
Free Icons for your reactjs and web applications
6. css.gg
-
29 Websites For Free Icon Sets
css.gg - A library of more than 500 minimalistic CSS icons, which are customizable and retina-ready.
-
10 FREE SVG Icon Libraries For Front-End Developers
700+ CSS Icons: Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled components, Figma, and Adobe XD. Easy integration: Embed, NPM & API.
-
70 Free Resources For Web Designers and Developers
23. css icons
-
Good News!!! Catagories...
// Define and ADD custom CSS const customCSS = ` hr { background-color: #ccc !important; } a.menu-link i { margin-right: 16px; } `; const style = document.createElement("style"); style.type = "text/css"; style.appendChild(document.createTextNode(customCSS)); head.appendChild(style); // Define separator const separator = document.createElement("hr"); separator.setAttribute("width", "80%"); separator.setAttribute("color", "white"); separator.setAttribute("background-color", "white"); separator.setAttribute("height", "1px"); separator.setAttribute("visible", "true"); //Adding links MENU_LINKS.forEach((link) => { if (link.name === "separator") { // Adding separator menuContainer.appendChild(separator.cloneNode()); } else { // Adding link // Manage icon (automatically import if start with gg-*** from https://css.gg) let icon = ""; if (link.icon.startsWith("gg-")) { icon = ``; const ggName = link.icon.replace("gg-", ""); // Inject css in the head const cssLink = document.createElement("link"); cssLink.type = "text/css"; cssLink.rel = "stylesheet"; cssLink.href = `https://css.gg/${ggName}.css`; head.appendChild(cssLink); } else { icon = ``; } // Create link const linkNode = linkTemplate.cloneNode(); linkNode.setAttribute("href", link.url); linkNode.setAttribute("routerLink", link.url); linkNode.setAttribute("target", (link.target || "_self")); linkNode.innerHTML = icon + " " + link.name; // Add link to the menu menuContainer.appendChild(linkNode); } });
- 25 CSS Tools/Resources That You Should Bookmark
-
Web Development Resources series! Part -2
👉 css.gg
- How can I make icons like these using HTML, CSS?
- Fontawesome alternatives
- CSS.GG - 2.0 - 700 UI Icons in CSS, SVG & Figma
What are some alternatives?
heroicons-ui
tailwind-figma - FlowBite is a free and open-source set of UI components and pages in Figma built for Tailwind CSS
nerd-fonts - Iconic font aggregator, collection, & patcher. 3,600+ icons, 50+ patched fonts: Hack, Source Code Pro, more. Glyph collections: Font Awesome, Material Design Icons, Octicons, & more
feather - Simply beautiful open-source icons
obsidian-icons-plugin - Add icons to your Obsidian notes – Experimental Obsidian Plugin
Google Fonts - Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
heroicons - A set of free MIT-licensed high-quality SVG icons for UI development.
genshin-api-tutorial - Repo to accompany the tutorial series for Web Dev Newbies
polybar - A fast and easy-to-use status bar
msn-weather-app-clone - Clone of the MSN weather app.