将图标添加到 html i 标签

Question

在 jQuery 中，如何将图标添加到 i 标签？

这里是 html 代码：

<div class="example_infobox1">
    <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="info-box">
            <span class="info-box-icon"><i class=""></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Messages</span>
                <span class="info-box-number">1,410</span>
            </div>
            <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
    </div>
    <!-- /.col -->
</div>

这是我试过的代码：

$('.example_infobox4 .i').addClass('fa fa-envelope-o');

我可以帮忙吗？

谢谢

Answer 1

您的选择器有误。 .i 将找到具有 class i 的元素。 i 将通过标签查找元素。

$('.example_infobox4 i').addClass('fa fa-envelope-o');

或

更具体：

$('.info-box-icon i').addClass('fa fa-envelope-o');

演示：https://jsfiddle.net/tusharj/nfjuk7mq/

Answer 2

<i></i> 是 HTML 中的一个元素，而不是 class 中的一个元素。 CSS select 或者 html 中的元素是 element 本身。即，如果您有以下 html，这就是您 select <i></i>

的方式

    <div class="division">
        <i class=""></i>
    </div>

$(".division i").addClass("fa fa-envelop-o");

访问此 link 了解更多详情 - CSS Selectors

Answer 3

Find you I tag and apply your class

$('body').find('i').addClass('customeClass')

看这个例子：http://jsfiddle.net/kevalbhatt18/8vvubj1k/

Hear I don't now your parent div so I use body in find so instead of body use your parent selecter

或者按照您的示例使用此选择器

$('.example_infobox1').find('i').addClass('fa fa-envelope-o')

Answer 4

使用这个脚本

var i = document.getElementsByTagName("i");
i.setAttribute("class", "class name");
i.setAttribute("src", "icon link");

将图标添加到 html i 标签

Adding an icon to a html i tag

jquery

icons

addclass