Verwenden von CSS, um einem schwarzen Symbol eine andere Farbe zu geben

Ich habe einige Apps gesehen, in denen zwar ein schwarzes Symbol enthalten war, in denen jedoch CSS verwendet wurde, um das Symbol in eine andere Farbe zu konvertieren. Ich kann diesen Prozess scheinbar nicht wiederholen

Hier ist meine back.css-Datei:

.dashboard-buttons a {
    width: 80px; 
    height: 80px; 
    border: 1px solid #ccc; 
    margin: 0px 5px; 
    display:inline-block;
    border-radius: 10px;
    background:white; 
    text-decoration:none;
   -moz-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25);
   -webkit-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25);
}
.dashboard-buttons a:hover {
    text-decoration:underline;
}
.dashboard-buttons span, 
.dashboard-buttons img {
    display:inline; 
    font-size: 12px; 
    font-weight:bold;
}

.dashboard-buttons .sessions img { 
    background-color:#C60; 
}
.dashboard-buttons .sessions img {
    -webkit-mask-image:url(mobile/images/calendar2.png)
}

Und der HTML-Code sieht so aus:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="back.css" />
         <title>West</title>
    </head>
    <body>
        <div class="dashboard-buttons">
            <a href="sessions.php" class="sessions">
                <img src="mobile/images/calendar2.png">
                <span>Sessions</span>
            </a>
        </div>
    </body>
</html>

Aber es funktioniert nicht in meinem Chrome-Browser. Vermisse ich etwas?

Zusätzliche Bemerkungen Ich muss nur moderne Webkit-Browser unterstützen. Sie müssen sich keine Sorgen um den Internet Explorer oder etwas anderes machen.

Ich habe meinen Code hier gepostethttp://jsfiddle.net/ZnbF3/ . Wenn Sie jsfiddle zum ersten Mal verwenden, funktioniert es hoffentlich? Wenn nicht, kopieren Sie einfach die HTML-Datei und die CSS-Datei, die ich bereits oben gepostet habe. Ich habe die calendar2.png an diese Frage angehängt.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage