javascript - 在代码中使用 font-awesome

Question

我的 JSP 文件中有以下代码

<div class="row-fluid">
                <div style="text-align: left;" class="span3 row-fluid">
                <label><spring:message code="alert.channels.outbound.lines"></spring:message>:&nbsp; </label>
                </div>
                <div class = "span3">
                <div class="textbox">  
                 <div class="textVal">${alertStatusForm.outboundLines}</div> 
                    <div class="pencil span3 ">
                    <img src="/static/img/pencil.png" alt="Edit">
                     </div>
                    <div class="save span3">
                    <img src="/static/img/disk.png" alt="Save">
                    </div>
                    <div class="close span3">
                    <img src="/static/img/Cross.png" alt="Close">
                    </div>
                </div>  
                </div>
            </div>

现在我必须使用 font-awesome 来代替 pencil.png 、 disk.png 和 Cross.png 。对于上述铅笔，磁盘和交叉，我有以下代码

Pencil =  icon-pencil ()
disk   =  icon-save ()
Cross  = icon-remove ()

来自网站http://fortawesome.github.io/Font-Awesome/cheatsheet/

请让我知道如何使用上述代码代替

Answer 1

您可以通过更改<i>标签而不是这样来编写<img>

<div class="row-fluid">
                <div style="text-align: left;" class="span3 row-fluid">
                <label><spring:message code="alert.channels.outbound.lines"></spring:message>:&nbsp; </label>
                </div>

            <div class = "span3">
            <div class="textbox">  
             <div class="textVal">${alertStatusForm.outboundLines}</div> 
                <div class="pencil span3 ">
                <i class="icon-edit"></i>
                 </div>
                <div class="save span3">
                 <i class= "icon-save"></i>
                </div>
                <div class="close span3">
                <i class= "icon-folder-close"></i>
                </div>
            </div>  
            </div>
        </div>  

确保您有与字体可怕的 css 的链接，或者在您的布局或视图中添加此链接

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Answer 2

您需要<IMG>使用以下内容更改标签：

<i class="icon-pencil"></i> 

<i>在元素上设置适当的类。