在代碼中使用超棒的字體

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>元素上設置適當的類。