ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.[Solved] CSS: Font Awesome icons showing as squares<p>Hi&nbsp;<a class="username" rel="chetan">chetan,</a></p> <p>To apply&nbsp;font-awesome icon you&nbsp;must have 2 classes, the fa class and the class that identifies the desired icon&nbsp;fa-paint-brush,&nbsp;fa-shopping-cart etc.</p> <p>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 &lt;i&gt; tag, but using a &lt;span&gt; is&nbsp;also correct.</p> <p>Apply the class to your span element.</p> <p>For more details and icons list refer below links.</p> <p><a href="https://www.w3schools.com/icons/fontawesome_icons_webapp.asp">https://www.w3schools.com/icons/fontawesome_icons_webapp.asp</a></p> <p><a href="https://fontawesome.com/icons?d=gallery">https://fontawesome.com/icons?d=gallery</a></p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&#34; /&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;div class=&#34;col-lg-7 col-md-7 col-sm-6 col-xs-12&#34;&gt; &lt;div class=&#34;hero-text-box&#34;&gt; &lt;div class=&#34;category-section&#34;&gt; &lt;div class=&#34;category-list1 owl-carousel owl-theme&#34; id=&#34;main-section-slider&#34;&gt; &lt;div class=&#34;catz_iconz&#34;&gt; &lt;a href=&#34;https://listing.downtown-directory.com/categories/arts-entertainment/&#34; class=&#34;icon-entertainment-and-arts new_v1&#34;&gt; &lt;/a&gt;&lt;span class=&#34;fa fa-paint-brush&#34;&gt;&lt;a href=&#34;https://listing.downtown-directory.com/categories/arts-entertainment/&#34;&gt; Arts &lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class=&#34;catz_iconz&#34;&gt; &lt;a href=&#34;https://listing.downtown-directory.com/categories/automotive/&#34; class=&#34;icon-antique new_v1&#34;&gt; &lt;/a&gt;&lt;span class=&#34;fa fa-automobile&#34;&gt;&lt;a href=&#34;https://listing.downtown-directory.com/categories/automotive/&#34;&gt; Automotive &lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class=&#34;catz_iconz&#34;&gt; &lt;a href=&#34;https://listing.downtown-directory.com/categories/shopping/&#34; class=&#34;icon-shopping-venues new_v1&#34;&gt; &lt;/a&gt;&lt;span class=&#34;fa fa-shopping-cart&#34;&gt;&lt;a href=&#34;https://listing.downtown-directory.com/categories/shopping/&#34;&gt; Shopping &lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class=&#34;catz_iconz&#34;&gt; &lt;a href=&#34;https://listing.downtown-directory.com/categories/travel/&#34; class=&#34;icon-travel-and-lodging new_v1&#34;&gt; &lt;/a&gt;&lt;span class=&#34;fa fa-suitcase&#34;&gt;&lt;a href=&#34;https://listing.downtown-directory.com/categories/travel/&#34;&gt; Travel &lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/270254/Solved-CSS-Font-Awesome-icons-showing-as-squares/https://www.aspforums.net:443/Threads/270254/Solved-CSS-Font-Awesome-icons-showing-as-squares/Wed, 02 Jan 2019 05:50:20 GMT