有文字旁边的图标按钮 [英] Having an icon beside text in a button

问题描述

我有一个按钮，这是所有的CSS。我想有文本左侧的图标。我该怎么做呢？

感谢。

 ＆LT;输入类型=提交/＆GT;
 

解决方案

 按钮{
    背景：橙色网址（图像/的icon.png）不重复5像素的中心;
    文本对齐：左;
    填充左：20像素;
}＆LT;按钮式=提交＆GT;提交＆LT; /按钮＆GT;
 

和另一种方式：

 按钮{
    现在的位置是：相对的;
    文本对齐：权利;
    填充右：20px的;
}按钮IMG {
    位置：绝对的;
    上图：5像素;
    左：5像素;
}＆LT;按钮式=提交＆GT;＆LT; IMG SRC =的icon.png/＆GT;提交＆LT; /按钮＆GT;
 

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