Search code examples
htmlfontsiconsglyph

Font Awsome Icons


I have saw a few posts on this and hopefully this will be a quick resolve for most people on here. I have purchased a template that I love, I have made a lot of mods on it and I am quite new to web dev and very new to font awesome. I would like to swap out the font awesome icons with my own - I see there is ways / very complex ways of adding to the font awesome library but this is way out of my knowledge limit just now.

This is the html:

We love technology

We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring brands to life online and direct consumer behaviour.

Bluetooth

We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.

Airdrop

We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.

NFC Enabled

We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.

Quick Response

We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.

</div>
<!--/Container -->

</section>

I would like to add my own images as they do not existing within the font awesome catalogue - safe to assume I will put images in an image folder, i.e. path /img/blutooth.png

Could someone show me how to do this?


Solution

  • There is no reason to even use FontAwesome in anyway for this. Just do what you said, which is create the images you want to use as icons (ex. images/icon-new.png) and insert them as plain images like so...

    <li class="element_fade_in">
        <img src="images/icon-new.png class="icon-wrench">
    <h5>Airdrop</h5>
    <p>We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.</p>                
    </li>
    

    then use the CSS class (icon-wrench for the example given) you used to position it properly and change sizes.