CODEWITHSUNDEEP
htmlcssfont-awesome
William
William

Reputation: 3395

Extending Font Awesome

I am using Font Awesome on a website.

I have a few custom icons and I would like to keep my code consistent, so I would like to use my new icons in the same way as Font-Awesome.

When I look at a font-awesome icon, it would seem that its content is set with the following CSS:

.icon-dashboard:before
{
    content: "\f0e5";
}

And then the icon is created as follows:

<a href="#"><i class="icon-dashboard></i></a>

However, if I have a .png image and try to use it in the same way, it doesn't seem to work:

.icon-network:before
{
    content: url("images/network-icon.png");
}

This just shows a blank image. What am I missing here?

Upvotes: 3

Views: 2689

Answers (2)

Dunc
Dunc

Reputation: 18922

Using an image in a pseudo element won't work without further stylng - it won't be given any space (hence you won't see it).

Something like this should work:

.icon-dashboard {
    height: 1em;        /* Fixed dimensions - scale with line height */
    width: 1em;
    position: relative; /* Required for inner 'absolute' positioning */
}

.icon-dashboard:before {
    content: '';
    height: 100%;       /* Fill parent */
    width: 100%;
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("images/network-icon.png");
}

Things to be aware of when using raster images rather than fonts or SVGs:

  • Scaling/aliasing issues
  • Fixed colour

An alternative is to create your own font, which includes Font Awesome ones as well as your own - e.g. https://icomoon.io or https://fontastic.me

Upvotes: 1

Aibrean
Aibrean

Reputation: 6412

If it shows a blank image, that means your pathing is off. The path is relative to your CSS file. Check the properties in your browser of where the image is trying to pull from and that will help you diagnose the issue.

Upvotes: 0

Related Questions