Railsでアクティブとマークされている場合、グリフコンをボタンに適用するにはどうすればよいですか？

Question

だから私は、ユーザーがクリックした単語の隣にチェックマークのグリフコンを追加しようとしています。ボタンTESTをクリックすると、ボタン全体が色が変わって、単語testの左側にチェックマークが表示されるとします。

はその後

<button type="button" class="btn wk-prd-btn" style="margin-right: 15px;"><span class="fa fa-check-circle"></span>TEST</button> 

CSSのために私が持っている：私は、ボタンの周りのdivを置くとCSSでオーバーレイを行うと考えられますがしました

.wk-prd-btn:focus { 
    background-color: #e74481; 
    color: white; 
} 

.wk-prd-btn:hover { 
    background-color: #e74481; 
    color: white; 
} 

ことが影響し

私には、以下の持っています私がしたくないボタン自体のテキスト。どのように対処するための任意の提案？

Answer 1

には、次のものが使用される：

<button type="button" class="btn wk-prd-btn wk-click"> MUG</button> 

次にCSSで：

.wk-click:focus:before{ 
    content: ""; 
    font-family: "fontawesome"; 
} 

ちょうど彼らのクリックを維持するために、ボタンを取得する必要があります。うまくいけば、私の大失敗は他人を助けることでしょう