[Solved] CSS: Font Awesome icons showing as squares

Last Reply 2 months ago By dharmendr

Posted 2 months ago

I am working on beta.foodubai.com

i have used the following:

   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
   <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
       <div class="hero-text-box">
         <h3 class="hero-title">More then <strong>17</strong> business listed</h3>
         <h2> Find and explore world top Places </h2>
         <div class="category-section">
           <div class="highlighted-text"> <img class="main-arrow" src="https://listing.downtown-directory.com/wp-content/themes/dwt-listing/assets/images/main-arrow.png" alt="dwt-listing"> </div>
           <div class="category-list1 owl-carousel owl-theme"  id="main-section-slider">
               <div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/appliances/" class="icon-electronics new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/appliances/"> Appliances </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/arts-entertainment/" class="icon-entertainment-and-arts new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/arts-entertainment/"> Arts </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/automotive/" class="icon-antique new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/automotive/"> Automotive </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/beauty-spa/" class="icon-day-spas new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/beauty-spa/"> Beauty </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/health-medical/" class="icon-dental new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/health-medical/"> Health </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/hotels/" class="icon-property-management new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/hotels/"> Hotels </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/real-estate/" class="icon-construction-and-real-estate new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/real-estate/"> Real Estate </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/restaurant/" class="icon-food-and-dining new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/restaurant/"> Restaurant </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/services/" class="icon-repair-and-service new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/services/"> Services </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/shopping/" class="icon-shopping-venues new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/shopping/"> Shopping </a></span></div><div class="catz_iconz"><a href="https://listing.downtown-directory.com/categories/travel/" class="icon-travel-and-lodging new_v1"></a><span><a href="https://listing.downtown-directory.com/categories/travel/"> Travel </a></span></div>
           </div>
         </div>
       </div>
     </div>

The problem is that when I try to use an icon, all that gets rendered on the page is a big square.

Any help will be appreciated.

You are viewing reply posted by: dharmendr 2 months ago.
Posted 2 months ago Modified on 2 months ago

Hi chetan,

To apply font-awesome icon you must have 2 classes, the fa class and the class that identifies the desired icon fa-paint-brush, fa-shopping-cart etc.

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements like the <i> tag, but using a <span> is also correct.

Apply the class to your span element.

For more details and icons list refer below links.

https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

https://fontawesome.com/icons?d=gallery

Check this example. Now please take its reference and correct your code.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
    <div class="hero-text-box">
        <div class="category-section">
            <div class="category-list1 owl-carousel owl-theme" id="main-section-slider">
                <div class="catz_iconz">
                    <a href="https://listing.downtown-directory.com/categories/arts-entertainment/" class="icon-entertainment-and-arts new_v1">
                    </a><span class="fa fa-paint-brush"><a href="https://listing.downtown-directory.com/categories/arts-entertainment/">
                        Arts </a></span>
                </div>
                <div class="catz_iconz">
                    <a href="https://listing.downtown-directory.com/categories/automotive/" class="icon-antique new_v1">
                    </a><span class="fa fa-automobile"><a href="https://listing.downtown-directory.com/categories/automotive/">
                        Automotive </a></span>
                </div>
                <div class="catz_iconz">
                    <a href="https://listing.downtown-directory.com/categories/shopping/" class="icon-shopping-venues new_v1">
                    </a><span class="fa fa-shopping-cart"><a href="https://listing.downtown-directory.com/categories/shopping/">
                        Shopping </a></span>
                </div>
                <div class="catz_iconz">
                    <a href="https://listing.downtown-directory.com/categories/travel/" class="icon-travel-and-lodging new_v1">
                    </a><span class="fa fa-suitcase"><a href="https://listing.downtown-directory.com/categories/travel/">
                        Travel </a></span>
                </div>
            </div>
        </div>
    </div>
</div>

Demo