Button mit einem Symbol CSS

Ich habe einen einfachen Login (über Google Mail) Knopf mit grüner Farbe erstellt. Schauen sie bitteButton mit einem Symbol CSS

<!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>

Aber ich kann mein Symbol auf der Schaltfläche nicht sehen. Bitte sagen Sie mir warum?

Quelle

2017-11-16 D. Anna

Ihr Selektor sollte '.button.icon' sein – UncaughtTypeError

Versuchen Sie, das Symbol als eine Klasse ".icon" zu deklarieren und es in die Schaltfläche zu verschachteln. Stil wie benötigt von dort.

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

Quelle

2017-11-16 18:43:26

Es funktioniert nicht mit Punkt. Jedenfalls sind meine html und png Datei im selben Ordner auf dem PC. Ich weiß nicht, was los ist –

@ k.cornett Fair genug, nicht-down- –

@ D.Anna Haben Sie versucht, eine Hintergrundgröße festlegen? z.B.: 'background-size: contain' – UncaughtTypeError

Set Stilregeln für die .icon-Klasse finden Sie unter Code:

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

Quelle

2017-11-16 19:02:12

Sie die quots "vergessen haben" und ändern: Symbol .icon

Versuchen Sie diese:

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

Quelle

2017-11-16 19:50:53

Button mit einem Symbol CSS

Antwort

Verwandte Themen