自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

Rails Glyphiconも使ってみる

ちょっとしたボタン、いいねやコメントにglyphiconを使ってみたのでそのメモ。

f:id:kslabo51:20191230230335p:plain

基本的使い方

glyphiconの基本的な使い方はこちら

<span class="glyphicon 使いたいアイコンのクラス名" aria-hidden="true"></span>

 

いつものように下記より参照させていただきました。

bootstrap3.cyberlab.info

 

area-hidden=”true”

この中で気になったのがarea-hidden=”true”。

これについては下記のサイトで紹介がありました。

参考サイト”Font Awesomeでも使われている「area-hidden=”true”」とはなんだろう”

 

またglyphiconに色も設定。設定方法はクラスを付けCSSで記載。

<span class="glyphicon glyphicon-star color-lightblue" aria-hidden="true"></span>

 

.color-lightblue {

 color: #00bfff;

}

 

f:id:kslabo51:20191230230022p:plain

こんな感じ。ちなみにハートはいいねを表していますが、クリックしてないときは

f:id:kslabo51:20191230211729p:plain

このように白いままです。

サイズ変更

アイコンサイズを変更するには、font-sizeを変更すればOK

.color-lightblue {

 color: #00bfff;

    font-size: 20PX;

}

 

version Rails 5.1.6