CSSの覚書 | アイコンに色を付ける | ワクガンス

←元の画像

アイコンに色をつける。

CSS

		.btn-base1 {
			width: 3em;
			height: 3em;
			display: inline-block;
			mask: no-repeat center/70%;
			-webkit-mask: no-repeat center/70%;
			background: #69b580;
		}
		
		.btn-rowing{
			mask-image: url(./img/note6/rowing_black_24dp.svg);
			-webkit-mask-image: url(./img/note6/rowing_black_24dp.svg);
		}
	

HTML

		<button type="button" class="btn-base1 btn-rowing"></button>
		<button type="button" class="btn-base1 btn-rowing" style="background:red"></button>
		<button type="button" class="btn-base1 btn-rowing" style="background:#fbc421"></button>