在代码中使用字体很棒

Using font-awesome in a code

本文关键字：字体 代码      更新时间：2023-09-26

我的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>

现在我不得不用很棒的字体来代替pencil.png、disk.png和Cross.png。我有下面的代码，上面的铅笔，磁盘和十字作为

Pencil =  icon-pencil (&#xf040;)
disk   =  icon-save (&#xf0c7;)
Cross  = icon-remove (&#xf00d;)

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

请告诉我如何使用上面的代码来代替

您可以通过更改为<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>

Besure，你有链接与字体awsome 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">

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

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

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

相关文章：