HTMLのみでアイコンを表示したり拡大したり色を変えてブログなどに貼り付ける簡単な方法。
ブログを書く上で、ちょっとした飾りにアイコンなどを作成して貼り付けてみたくないですか!
ちょっとした飾りで文章に合うアイコンを使うだけでインパクトがあり読む側に記憶として残りやすいです。
そこで、アイコンの表示や拡大、色を変更したHTMLコードを紹介したいと思います。
</>アイコンHTMLコードコピペOK
<div class="fab fa-blogger fa-2x";style="color: black;"></div>
コードの簡単説明
コードの中にあるfab fa-bloggerがアイコンコード
コードの中にあるfa-2xが拡大表示コード
コードの中にあるcolor: blackが色変更コード
上記3項目を変更するだけで自分のブログやサイトに合ったアイコンを設定できます。
bloggerアイコンを使った変更例
コードにある fab fa-blogger がアイコンのコード。
これがブロガーアイコン
他のアイコンにするには、fabの部分とbloggerをアイコン一覧から選択して変更するだけ。
fabの部分は、アイコンによってfas・far・faなどに変更する必要があります。
アイコン一覧表に記載されているので必要に応じて変更して下さい。
ブロガー(blogger)の部分も変えたいアイコンの名称を入力して変更して下さい。
アイコン一覧はこちら
アイコンの大きさを変えるコード
コードにある fa-2x がアイコンの大きさを表すコード。
実際に変えるのは、数字の 2 の部分だけ変更。
fa-1xの大きさ
fa-2x
fa-3x
fa-4x
お好みの大きさに変更して使用して下さい。
アイコンの色を変更するコード
コードにある color: black がアイコンの色を変えるコード。
色を変更するにはコードにある black の部分を他の色コードに変更するだけ。
black
red