HTML / CSS - 将图标添加到按钮 [英] HTML/CSS - Adding an Icon to a button
本文介绍了HTML / CSS - 将图标添加到按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我制作一些CSS按钮,我想在文本Button Text之前添加一个图标。
I making some css buttons and I want to add an icon before the text, "Button Text".
但我不知道该怎么做...
But I dont know how I should do this...
HTML
< div class =btn btn_red>< a href =#> Crimson< / a>< span>< / span>< / div>
CSS
body {
margin: 0;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
/* Glassy Buttons */
.btn {
float: left;
clear: both;
background: url(imgs/button_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(imgs/button_middle.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(imgs/button_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_gray {background-color: #808080;}
.btn_green { background-color: #ADFF2F;}
.btn_blue {background-color: #0000CD;}
.btn_red {background-color: #DC143C;}
推荐答案
您可以在与特定类的链接之前添加span:
You could add a span before the link with a specific class like so:
<div class="btn btn_red"><span class="icon"></span><a href="#">Crimson</a><span></span></div>
然后给出一个特定的宽度和背景图像就像你在使用按钮本身。
And then give that a specific width and a background image just like you are doing with the button itself.
.btn span.icon {
background: url(imgs/icon.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
我没有CSS上师,工作。
I am no CSS guru but off the top of my head I think that should work.
这篇关于HTML / CSS - 将图标添加到按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文