Question

我创建了一个绿色的简单登录（通过Gmail）按钮。请看这个，

 <!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button:icon {
    background: url(gmail-icon.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}    
</style>
</head>
<body>

<button class="button"><span class="icon"></span>Button</button>

</body>

但是我无法在按钮上看到我的图标。请告诉我为什么？

Answer 1

尝试将图标声明为“.icon”类并将其嵌套在按钮内。从那里需要的样式。

.button .icon {
background: url(gmail-icon.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}

Answer 2

设置.icon类的样式规则，请参阅下面的代码：

＆＃13;

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
.button .icon {
    background: url(https://image.flaticon.com/icons/svg/281/281769.svg) no-repeat;
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 10px
}  
.button .span {
    float: left;
    width: 20px;
    height: 20px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button class="button"><span class="icon"></span>Button</button>
</body>

＆＃13;

Answer 3

你忘记了这些问题＆＃34;＆＃34; 并更改：icon to .icon

试试这个：

.button .icon {
    background: url("gmail-icon.png") no-repeat;
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

带有图标CSS的按钮

3 个答案: