HTMLのみでアイコン表示・拡大・色変えができる簡単コード紹介

f:id:nkrmk:20200927080430j:image

 

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)の部分も変えたいアイコンの名称を入力して変更して下さい。

 

アイコン一覧はこちら

webllica.com

 
 
アイコンの大きさを変えるコード
コードにある fa-2x がアイコンの大きさを表すコード。
実際に変えるのは、数字の の部分だけ変更。
fa-1xの大きさ
fa-2x
fa-3x
fa-4x
 
お好みの大きさに変更して使用して下さい。
 
 
アイコンの色を変更するコード
コードにある color: black がアイコンの色を変えるコード。
色を変更するにはコードにある black の部分を他の色コードに変更するだけ。
black
red
green
blue
 
お好みの色に変更して使用して下さい。
 
 
 
 

appleアイコンを使った変更例

</>アップルアイコンHTMLコードコピペOK
<div class="fab fa-apple fa-2x";style="color: black;"></div>
 

コードにある fab fa-apple がアップルアイコンのコード。

blogger 部分を apple に変更するだけ。

これがアップルアイコン
 
 
アイコンの大きさを変えるコード
fa-1xの大きさ
fa-2x
fa-3x
fa-4x
 
 
アイコンの色を変更するコード
black
red
green
blue
 
 
上記に2例だけ紹介しましたが、まだまだたくさんアイコン種類があるので自分の好きなアイコンを使ってオリジナリティーのあるブログやサイトを作成してみて下さい。