Create an icon

I’m using font awesome and am using several lf the icons, I found a icon (which didn’t come with FA) and was wondering if theres a way to add it, so that its color changes along with its surrounding text?

Great question, Luke.

My turn… What do we always ask you to provide to us when you submit a question??? (hint: it’s even written in our posting guidelines.)

1 Like

oh, duh sorry, I found a SVG of rack I think I can use.
https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi90LTDp6_fAhWGKnwKHWGRDpsQjRx6BAgBEAU&url=https%3A%2F%2Fwww.flaticon.com%2Ffree-icon%2Frack-servers_31726&psig=AOvVaw3CTJ6eL0M0iL9Hu7b6YkKz&ust=1545426161606228
Is it possible to use an image tag so it will act like the font awesome icons?
(like save the SVG, then call it like

<img src="images/rack_elevations_icon.svg" width="15">

It would have been nice to have a link to or a look at your page/code to suggest different options. :wink:

Maybe this article by Chris Coyier could be of interest?

Or this post at SO to instead make it an inline SVG to respond to the CSS color?

1 Like

CSS won’t affect a referenced files outside of the current document, just like a page in an iframe won’t be touched by your CSS.
So you have to go in-line with your SVGs for CSS to work on them.
The trick I like to use is to make the SVG a PHP include. That way it remains a separate, independent, reusable file that you only need edit in one place if required. Plus it removes clutter from your (source) HTML with complex shapes.

2 Likes

ok, Heres tttthe page,


The icons are on the menu to the left. They are all font awesome icons except the one for rack elevations. I like how the icons turn white (along with the text). Heres that line…

<li class="nav-item rack_elevations">
      <a class="nav-link" href="rack_elevations.html"><img src="images/rack_elevations_icon.png" class="rack_elevations_icon">&nbsp;&nbsp;Rack Elevations</a>
      </li>

Since I want the image to be white when the mouse hovers over the link, is this the right css

.rack_elevations:hover .rack_elevations_icon {
  background-color:white;
}

I tried to save the image as a SVG, then replaced the image tag with the svg one but that didn’t work either.
Can I make nthis happen using css or the svg way?

Luke, if you wanted the logo image at the top of the page to be a different color, how would you change the color?
. . . .
Right! You would have to create another image with the new color and swap them on hover. OR you could create a transparent image with opaque surroundings and change the background color behind the image (which would show through the transparent portion of the logo image) and your CSS might work.

Font Awesome icons are created as font characters and their color is determined by the color:#000 that you choose.

Images and font characters are different species.

It should work using the method described in the CCS Tricks article linked by @Erik_J
Here is a fork of Chris Coyier’s pen where I made each line into a link that can be hovered.

2 Likes

Well done @SamA74! :+1:

And also, your PHP include would only be used once in each page. Gives a nicer html output than included in each place, I like that. Thanks for the tip! :slight_smile:

Actually I have not used it that way myself yet, but it’s something I will probably do.
Where icons are reused in a page and throughout a site, it makes sense to have a library of icon defs, included once, then use just an xlink:href whenever an icon is used.
That could potentially cut code, cut requests and make tidyer html.
It could go the other way if including a library of unused icons in a page, so I guess there is a balance to be made as to when it’s appropriate to do this.
Certainly it’s good where icons appear in a menu or other element common to every page, or where an icon appears several times on a page.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.