CODEWITHSUNDEEP
cssfont-awesome
DevWizard
DevWizard

Reputation: 695

No ruler icon in Font-Awesome

I'm using Font-Awesome in my project and I need a ruler icon, at the moment I created a button with background-image a ruler icon but it doesn't change the color if it's hover.

How can I add the same functions of Font-Awesome at this button?

I need to make it responsive, the color of button button:hover will be different for every client, so I can't create 200 icons.

With font-awesome I simply use css color to change the color of the icon

Here a screenshot of how it looks now, the print is the hover color

enter image description here

here the code I use:

<button type="button" class="custbtn"><em class="fa fa-minus" aria-hidden="true"></em></button>
<button type="button" class="custbtn"><em class="fa fa-plus" aria-hidden="true"></em></button>
<button class="custbtn" id="tlruler" value="off"></button>

.custbtn {
    background: #0b3c5d;
    color: #fff;
}
.custbtn:hover {
   background: #328cc1;
   color: #d9b310;
}

#tlruler {
  background-image: url("../images/ruler.png");
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

With Font-Awesome you can use css color to change the icon color

Upvotes: 0

Views: 1399

Answers (1)

Nisarg Shah
Nisarg Shah

Reputation: 14541

FontAwesome icons aren't images. They are fonts, and that's why they respond to CSS color attribute changes.

To get a similar effect, you'd need a ruler icon from another library that provides such font-icons. I generally go to FlatIcon when FontAwesome doesn't have a particular icon. From there you could download the icons as fonts.

The steps for FlatIcon.com would be:

  1. Add the selected icons to a collection.

  2. Download the collection in IconFont format. This will download a zip file containing a CSS file and another set of font files (applicable to different browsers).

  3. Now you could simply refer to this CSS file in your HTML page, and create icons by adding particular classes to elements:

    <span class="flaticon-ruler"></span>

    You could also color these icons with CSS styles:

    <span class="flaticon-ruler" style="color: red;"></span>

  4. [Optional] Move the CSS rules from the downloaded CSS file to your own CSS file. This is merely to avoid making one extra round-trip from the browser.

Upvotes: 1

Related Questions