Using font-awesome in a code

Question

I have the following code in my JSP file

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

Now I have to use the font-awesome in place of pencil.png , disk.png and Cross.png . I have the following codes for the above pencil , disk and Cross as

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

from the website http://fortawesome.github.io/Font-Awesome/cheatsheet/

Please let me know how to use the above codes in place of

Htoo Myat Aung · Accepted Answer · 2013-08-26 04:54:28Z

You can write like this by change to <i> tag instead of <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 that you have link with font awsome css or add this link in your layout or views

<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">

macwier · Accepted Answer · 2013-08-26 04:39:33Z

1

You need to change the <IMG> tags with the following:

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

Setting appropriate class on the <i> element.

answered Aug 26, 2013 at 4:39

macwier

1,0831 gold badge6 silver badges19 bronze badges

1 Comment

ronan Over a year ago

Do I need to import any link to include font-awesome in my page ?

Collectives™ on Stack Overflow

Using font-awesome in a code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related