Ishan Mahajan Ishan Mahajan - 29 days ago 7
CSS Question

Where will I be able to get image source and edit it if possible (Font awesome)?

I'm using a custom template and don't know where the certain definition is.
It is a cart image and I want to replace the image with some other, so I need to find it. I only have found this bit:

.fa-shopping-cart:before{content:"\f07a"}


Moreover I didn't understand what this content is for.

Answer

Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more.

Whilst the implementation in Bootstrap is designed to be used with the <i> element (Bootstrap v2), you may find yourself wanting to use these icons on other elements. To do so, you'll need to use the following CSS on the desired element, and then substitute in the content value for the relevant icon and was able to find substitute.It includes following icons such as:

  • Web Application Icons
  • Accessibility Icons
  • Hand Icons
  • Transportation Icons
  • Text Editor Icons
  • Brand Icons All these icons,and much more can be used just by using class.

Font Awesome does not use images for icons and an img element without a src attribute is invalid HTML.

What you can do is add logic to show or hide the dummy icon beside the image. Here is an example using a class on a parent wrapper:

<div className="show-icon">
    <i className="fa fa-..."></i>
    <img src="..." />
</div>

When the parent div element has a class of .show-icon, you can use CSS to show the icon and hide the image:

div i.fa { display: none; }
div img { display: block; }

div.show-icon i.fa { display: inline-block; }
div.show-icon img { display: none; }