font-awesome

How can I add shadow to a fontawesome svg icons?

by

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

Text gradient with font awesome

by

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

by

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

“NetworkError: 404 Not Found fontawesome-webfont.woff?v=4.0.3

by

This worked for me: Add the following lines to your web.config <system.webServer> <staticContent> <remove fileExtension=”.woff”/> <mimeMap fileExtension=”.woff” mimeType=”application/x-font-woff” /> </staticContent> </system.webServer> You have to add these lines because by default Apache is not configured with .woff as a default MIME-type. Apache default MIME-type This holds for IIS as well. As Seb Duggan explains here:IIS default … Read more

Set Font Awesome icons as cursor – is this possible?

by

Got it! Create a canvas Draw the fa icon on it Change it into a base-64 image url Apply the image on the cursor css style And I made a demo: http://jsfiddle.net/rqq8B/2/ // http://stackoverflow.com/questions/13761472/how-to-render-glyphs-from-fontawesome-on-a-canvas-element // http://stackoverflow.com/questions/13932291/css-cursor-using-data-uri $(function() { var canvas = document.createElement(“canvas”); canvas.width = 24; canvas.height = 24; //document.body.appendChild(canvas); var ctx = canvas.getContext(“2d”); ctx.fillStyle = … Read more

Is it possible to change between two fontawesome icons on hover?

by

You could toggle which one’s shown on hover: HTML: <a href=”#” class=”lock”> <i class=”icon-unlock”></i> <i class=”icon-lock”></i> </a> CSS: .lock:hover .icon-unlock, .lock .icon-lock { display: none; } .lock:hover .icon-lock { display: inline; } Or, you could change the content of the icon-unlock class: .lock:hover .icon-unlock:before { content: “\f023”; }