I am working on betafoodubaicomi have used the following ltlink href34httpsmaxcdnbootstrapcdncomfontawesome420cssfontawesomemincss34 rel34stylesheet34gt ltdiv class34collg7 colmd7 colsm6 colxs1234gt ltdiv class34herotextbox34gt lth3 class34herotitle34gtMore then ltstronggt17ltstronggt business listedlth3gt lth2gt Find and explore world top Places lth2gt ltdi

[Solved] CSS: Font Awesome icons showing as squares

chetan

SOLVED CLOSED ACTIVE ANSWERED
User: chetan
Posted: on Jan 02, 2019 04:33 AM
Forum: HTML and CSS
Answer: 1
Views: 19160

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.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on Jan 02, 2019 05:50 AM
Modified: on Jan 02, 2019 05:50 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

[Solved] CSS: Font Awesome icons showing as squares

Company

Explore

Follow us

Contact Us