CODEWITHSUNDEEP
jqueryhtmlcss
James123
James123

Reputation: 11652

load image with css class?

I have class which create a button type background. How to load a icon image before text like this?

enter image description here

html

<div style="padding-left: 5px; position: absolute; height: 3em;width: 100%;">               
    <div id="Body_inputUpload" class="uploadify"><object id="SWFUpload_0" type="application/x-shockwave-flash" data="Images/uploadify.swf?preventswfcaching=1396906987080" width="120" height="30" class="swfupload" style="position: absolute; z-index: 1;"><param name="wmode" value="transparent"></object>
  <div id="Body_inputUpload-button" class="uploadify-button fileUploaderBtn">
         <span class="uploadify-button-text">Upload</span>
  </div>
</div>
<div id="Body_inputUpload-queue" class="uploadify-queue"></div>

css

.uploadify {
position: relative;
margin-bottom: 1em;
}
.fileUploaderBtn {
border: .1em #868686 solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 1em;
font-family: Segoe UI;
padding: 5px 10px 5px 5px;
text-decoration: none;
display: inline-block;
text-shadow: 0px 0px 0 rgba(0,0,0,0.3);
text-align: left;
color: #000000;
background-color: #f4f5f5;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    height: 25px;
line-height: 20px;
width: 81px;
}

want to load this image enter image description here

JSFiddle

Upvotes: 0

Views: 2716

Answers (5)

G-Cyrillus
G-Cyrillus

Reputation: 105873

just add your image with :before , in front of text 'Upload' DEMO Your HTML 

<span class="uploadify-button-text">Upload</span>

CSS that you can use to 'load' image within. 

.uploadify-button-text:before {
    content:url(https://i.sstatic.net/ZPMV1.png)' ';/* image + 1 white-space */
    vertical-align:-0.2em;/* tune this if needed */
}

Upvotes: 0

krozero
krozero

Reputation: 6433

you can add that image in :before

add this css: 

.fileUploaderBtn:before {
    content: "";
    background: url("https://i.sstatic.net/ZPMV1.png") center no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding-right: 20px;
    vertical-align: middle; 
}

and change width: 81px; to min-width: 81px; in .fileUploadBtn class.

here's example in JSFillde: http://jsfiddle.net/cLeJs/4/

Upvotes: 1

ramesh
ramesh

Reputation: 2477

Add the following styles to the following classes:

.uploadify-button-text{
padding-left: 30px;
background: url('https://i.sstatic.net/ZPMV1.png') left center no-repeat;
}

I personally think its better to use background images so that you can add hover states if you like, and remove width off .fileUploaderBtn There is no need to give the button a specific width in this case. If you want the button to have a specific width, alter the padding.

Upvotes: 0

Karim AG
Karim AG

Reputation: 2193

You only have to place the img tag before the text span:

<img id="img" src="https://i.sstatic.net/ZPMV1.png" /> <span class="uploadify-button-text">Upload</span>

Here is the updated fiddle

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10182

If you have access to the DOM, you can just insert the image via an img tag placed right before the span containing the text "upload". Here is a fiddle showing that option: http://jsfiddle.net/72M8h/

Upvotes: 2

Related Questions