Html 如何使用CSS获取图像按钮旁的文本

我试图用CSS创建一个按钮。html代码看起来像

<div class="content">
    <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ width="20" height="20">
    <span class="fon">Google</span>
</div>

我得到了预期的输出，但我想减少重复的html代码，并将它们移到CSS中，这样我只需要编写类似于以下代码的代码，并显示相同的输出：

<span class="mybutton">Google</span> 

Google

这是我的名片

html

<p class="mybutton">Google</p>

---

jsIDLE:

您可以使用css的

后台属性作为按钮：

.mybutton {
    ....
    background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png') no-repeat center center #2d3f51
    ....
}

如果你想去掉HTML代码（我假设是img的宽度和长度），你可以把宽度和高度放在
.content img
CSS类中

.content img {
    margin: 5px;
    float: left;
    width: 20px;
    height: 20px;
}

css

.mybutton{
宽度：90px；
高度：30px；
溢出：隐藏；
颜色：#F5；
背景：#2d3f51；
背景图片：url(http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png);
背景尺寸：20px，20px；
背景重复：无重复；
背景位置：5px；
填充顶部：10px；
左侧填充：30px；
}

JSFIDLE链路
那么您想只使用css来设置span的样式，而不添加任何类？我说的对吗？是的。。对的但是，如果需要，我们可以有额外的CSS类。但是，在单个html代码中需要。正是。。！！谢谢你的帮助。欢迎。注意：使用flexbox时使用前缀。
.mybutton {
    ....
    background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png') no-repeat center center #2d3f51
    ....
}

.content img {
    margin: 5px;
    float: left;
    width: 20px;
    height: 20px;
}