有文字旁边的图标按钮 [英] Having an icon beside text in a button
本文介绍了有文字旁边的图标按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个按钮,这是所有的CSS。我想有文本左侧的图标。我该怎么做呢?
感谢。
<输入类型=提交/>
解决方案
按钮{
背景:橙色网址(图像/的icon.png)不重复5像素的中心;
文本对齐:左;
填充左:20像素;
}<按钮式=提交>提交< /按钮>
和另一种方式:
按钮{
现在的位置是:相对的;
文本对齐:权利;
填充右:20px的;
}按钮IMG {
位置:绝对的;
上图:5像素;
左:5像素;
}<按钮式=提交>< IMG SRC =的icon.png/>提交< /按钮>
I have a button which is all css. I want to have an icon to the left of the text. How do i do that?
Thanks.
<input type="submit"/>
解决方案
button {
background: orange url(images/icon.png) no-repeat 5px center;
text-align: left;
padding-left: 20px;
}
<button type="submit">Submit</button>
and another way :
button {
postion: relative;
text-align: right;
padding-right: 20px;
}
button img {
position: absolute;
top: 5px;
left: 5px;
}
<button type="submit"><img src="icon.png" /> Submit</button>
这篇关于有文字旁边的图标按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文