How can I edit Font Awesome (or include my own icons)?
You can use icomoon. Browse to the library page and use FontAwesome, you can augment FontAwesome’s libary with your custom icons in SVG.
font-awesome
Angular Upgrade From 5 to 6: asset path must start with the project source root
Ok, Clarifying Abann’s solution. You must use the long form for assets outside the sourceRoot. I do think the documentation could be much more clear on that. It states You can use this extended configuration to copy assets from outside your project. For instance, you can copy assets from a node package: But really, it … Read more
How install font-awesome via bower
When you use font-awesome via bower it does not include the CSS when you build it. Try using: bower install components-font-awesome –save It should work just fine.
Font Awesome Background color
UPDATE: As xavier pointed out below, font-awesome has Stacked Icons which will let you put a circle behind an icon without using a hack. Essentially, you stack whichever icon you want on top of their fa-circle icon. You can then style the circle independently from the icon and change it to whatever color you’d like. … Read more
FontAwesome fails to load fonts locally and in electron app
I had a similar issue (perhaps this answer will help someone). I use Maven to build projects (Java + JS). Maven Filter Plugin corrupted binary font files. I had to add includes and excludes: <resources> <resource> <directory>${project.sources}</directory> <filtering>true</filtering> <excludes> <exclude>**/*.woff</exclude> <exclude>**/*.ttf</exclude> </excludes> </resource> <resource> <directory>${project.sources}</directory> <filtering>false</filtering> <includes> <include>**/*.woff</include> <include>**/*.ttf</include> </includes> </resource> </resources>
Is it possible to color the fontawesome icon colors?
Font-awesome comes with a number of both outlined and filled icons. The star is one of them. There are four different star icon classes that you can use: class=”icon-star” class=”icon-star-empty” class=”icon-star-half” class=”icon-star-half-empty” If you’re a glass-half-full type of person, you can also use the alias for ‘icon-star-half-empty’: class=”icon-star-half-full” You can colour the font-awesome icons and … Read more
How can I add shadow to a fontawesome svg icons?
TL;DR Use CSS filter: drop-shadow(…). DOCUMENTATION The reason text-shadow property does not work is that Font Awesome is not text when you use svg version loaded by javascript. I tried loading it using css and it works. Font Awesome loaded with CSS: .fa-globe{text-shadow:3px 6px rgba(255,165,0,.75)} <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.0/css/all.css”> <i class=”fas fa-10x fa-globe”></i> This will not … Read more
Changing Width of Font Awesome Icons
Really easy using scale .fa { transform: scale(1.5,1); }
Text gradient with font awesome
Apply the styles directly on the icon. .fa-gradient { background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”/> <i class=”fa fa-3x fa-wrench fa-gradient”></i>
Using FontAwesome with Sass
Ok, I got help with that and there were several issues with the paths that were the main problem. I’ll explain them here in case it helps someone in my position. The problem was: indeed, the font files were not loading The errors: mostly related to paths and how compass & sass behave with @import … Read more