「続きを読む」にアイコンフォントを追加したい

Question

こちらの質問＆回答（https://teratail.com/questions/26858）を参考に、READ MOREボタンを設置しました。

READ MOREの後に、アイコンフォントの右括弧 "＞"をつけたく、以下のようなコードにしたのですが、

 <p class="button"><span class="awsome">READ MORE</span></p>

.awsome:after{
	font-family: 'FontAwesome' ;
	content: '\f054';
	padding-left: 5px ;
}

$(function () {
    $('.button').prevAll().hide();
    $('.button').click(function () {
        if ($(this).prevAll().is(':hidden')) {
            $(this).prevAll().slideDown();
            $(this).children().text('CLOSE').addClass('close');
        } else {
            $(this).prevAll().slideUp();
            $(this).children().text('READ MORE').removeClass('close');
        }
    });
});

（先のリンク先の回答欄を見て、一応「.children」を足してみましたが、この意味をあまり理解できておりません。。）

これを、CLOSEボタンでは"＞"を表示しない、または、左括弧"＜"に変更するようにしたいのですが、
（そして、閉じた後のREAD MOREボタンには再び"＞"をつけたい）
その場合はどのように記述すれば良いでしょうか。

ご教授いただけましたら幸いです。
よろしくお願いいたします。

Answer 1

どちらの場合もcssに少し追記するだけで実現可能です。
以下のどちらかを.awsome:after～の後に追記してみてください。

アイコンを表示しない場合

.awsome.close:after{
    content: '';
}

左括弧"＜"に変更する場合

.awsome.close:after{
    content: '\f053';
}

Comments

[usiko]

教えていただいた通りに記載したところ、うまくいきました！
調べてもなかなか解明できず困っていたので、とても助かりました。
的確で素早いご回答を本当にありがとうございました！！