Font Awesome

How to add a spinner icon to button when it’s in the Loading state?

by

Twitter Bootstrap’s buttons have a nice Loading… state available. The thing is that it just shows a message like Loading… passed through the data-loading-text attribute like this: <button type=”button” class=”btn btn-primary start” id=”btnStartUploads” data-loading-text=”@Localization.Uploading”> <i class=”icon-upload icon-large”></i> <span>@Localization.StartUpload</span> </button> Looking at Font Awesome, you see that there’s now an animated spinner icon. I tried to … Read more

Font-awesome, input type ‘submit’

by

There seems to be no class for input type ‘submit’ in font-awesome. Is it possible to use some class from font-awesome for button input? I’ve added icons to all buttons (which actually links with class ‘btn’ from twitter-bootstrap) in my applications, but can’t add icons on ‘input type submit’. Or, how to use this code: … Read more

Font Awesome not working, icons showing as squares

by

So I’m trying to prototype a marketing page and I’m using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. Here’s how I include the files in the head: <head> <title>Page Title</title> <link rel=”stylesheet” href=”https://stackoverflow.com/questions/14366158/css/bootstrap.css”> … Read more

Can I change the color of Font Awesome’s icon color?

by

I have to wrap my icon within an <a> tag for some reason. Is there any possible way to change the color of a font-awesome icon to black? or is it impossible as long as it wrapped within an <a> tag? Font awesome is supposed to be font not image, right? <a href=”https://stackoverflow.com/users/edit”><i class=”icon-cog”></i> Edit … Read more

How do I use a Font Awesome icon for a custom Gutenberg block?

by

Success! I had to pass the viewBox attribute from the Font Awesome SVG file. The code below worked for me: [php]const iconEl = el(‘svg’, { width: 20, height: 20, viewBox: ‘0 0 512 512’ }, el(‘path’, { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 … Read more