带有图标 CSS 的按钮答案

【问题标题】：Button with an icon CSS带有图标 CSS 的按钮
【发布时间】：2017-11-16 18:40:48
【问题描述】：

我创建了一个简单的绿色登录（通过 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>

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

【问题讨论】：

你的选择器应该是.button .icon

标签： html css button icons

【解决方案1】：

为.icon类设置样式规则，见以下代码：

.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;
}

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

【讨论】：

【解决方案2】：

尝试将图标声明为“.icon”类并将其嵌套在按钮内。从那里根据需要设计风格。

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

【讨论】：

它不适用于点。无论如何，我的 html 和 png 文件在 pc 上的同一个文件夹中。不知道怎么回事
@D.Anna 你试过设置背景大小吗？例如：background-size: contain
@D.Anna 耶！让我们开香槟

【解决方案3】：

你忘记了引号“” 并将 :icon 更改为 .icon

试试这个：

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

【讨论】：