CODEWITHSUNDEEP
htmljquerycssfont-awesome
SjAnupa
SjAnupa

Reputation: 132

How set font awesome Icon witha text using jquery

I used to set font awesome icon to a div using jquery but failed. I need to set font awesome icon before the given text "Web Frameworks" with some styles. This is jquery line.

$('#webTitle').html("Web Frameworks");

This is font awesome icon that I need to insert.

<i class="fa fa-bar-chart fa-2x" aria-hidden="true" style="padding-right: 20px;"></i>

Can anyone suggest best way to do this?

Upvotes: 2

Views: 1379

Answers (1)

ROOT
ROOT

Reputation: 11622

You can just include the <i> tag in .html() function, here is a working snippet:

$('#webTitle').html('<i class="fa fa-bar-chart fa-2x" aria-hidden="true" style="padding-right: 20px;"></i>Web Frameworks');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="webTitle"></div>

Upvotes: 2

Related Questions