チェックボックスの非チェック時、チェック時、disabled時のデザインを変更する方法

現状

fontawesomeを使用したチェックボックスを作っています。

document.getElementById("disabled").onclick = function () {
    var obj = document.getElementById("check");
    if (obj.disabled === true) {
        obj.disabled = false;
        return;
    };
    obj.disabled = true;
};

html {
    text-align: center;
}

#checkBtn {
    cursor: pointer;
}

#check {
    display: none;
}

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

<label for="check" id="checkBtn">
    <i class="fas fa-check fa-3x"></i>
    <input type="checkbox" id="check">
</label>
<button id="disabled">disabled</button>

スニペットを実行するとサンプルを表示できます。

実現したいこと

チェックボックスの下記の状態に合わせて、アイコンの色を変えたいです。
・非チェック時
・チェック時
・disabled時

試したこと

:checked
上記ページを参考に、

input[type="checkbox"]:checked {
  color: red;
}

と書いてみましたが、効果はありませんでした。

また、disabled時のアイコンの色を変える場合は、JavaScriptで制御するしかないのでしょうか。