CSSを使用してイメージボタンの横のテキストを取得する方法

Question

私は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> 

のように見え、CSSは、私はちょうどする必要があるので、予想通り、私は出力を取得していますが、私は繰り返しのhtmlコードを削減し、CSSに移動したかった

.content { 
    width: 120px; 
    overflow: hidden; 
    color: #f5f5f5; 
    background: #2d3f51; 
} 

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

.fon{ 
    position:relative;top:5px; 
} 

ですコード以下のようなコードを書いて、同じ出力を表示する必要があります。ここでは

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

は私のJSFiddle

ですhttp://jsfiddle.net/WW4N6/678/

Answer 1

HTML

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

CSS

.mybutton { 
    background: #2d3f51; 
    color: #f5f5f5; 
    display: flex; 
    align-items: center; 
    height: 30px; 
    width: 100px; 
    padding: 0 5px; 
} 

.mybutton:before { 
    content: ''; 
    background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png'); 
    background-size: cover; 
    width: 20px; 
    height: 20px; 
    display: inline-block 
} 

JSFiddle：http://jsfiddle.net/WW4N6/681/

Answer 2

あなたのボタンのCSSのbackgroundプロパティを使用できます。

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

Answer 3

あなたがHTMLコードを取り除きたい場合は（IMGの幅や長さ、私は仮定している）、あなたは自分の.content img CSSクラスで幅と高さを置くことができ

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

Answer 4

CSS

.mybutton { 
    width: 90px; 
    height: 30px; 
    overflow: hidden; 
    color: #f5f5f5; 
    background: #2d3f51; 
    background-image: url(http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png); 
    background-size: 20px, 20px; 
    background-repeat: no-repeat; 
    background-position: 5px; 
    padding-top: 10px; 
    padding-left: 30px; 
} 

jsFiddleリンク http://jsfiddle.net/joshchurning/9sysby5f/