【2021年】 Icons Generator 設定から設置までの流れを解説!

シュウ

今回は【2021年】 Icons Generator 設定から設置までの流れを解説!
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
CSS Shapes and Icons Generatorについて学びたい方へ
今回はIcons Generator(アイコン)について解説しております。

今回は、Icons Generator(ジェネレーターサイト)について解説します。
Webサイトでアイコン、「矢印、plusボタン」など使用する頻度はとても多いと思います。
そんな時に簡単に実装できるのが、Icons Generatorのジェネレーターサイトになります。

アイコンと代表的なサイト「FontAwsome」もありますが、
この「Icons Generato」は完全にCSSだけでアイコンを作成できます。

[記事の内容]

Icons Generatoの使い方

Icons Generatoとは、無料で利用可能なアイコンのサービスです。
まずは下記のサイトから「CSS Shapes and Icons Generator」にアクセスしましょう。

●CSS Shapes and Icons Generator: 1http://androidcss.com/css-shape-icon-generator/

ユーザー登録などは不要です、無料で利用可能です。
アイコンの100種類以上あります。

画面の使い方について

● アイコンをクリック: 1使用したいアイコンをクリックします。

● ポップアップ画面: 2「COLOR(色)」、「SIZE(サイズ)」を選択します。

● GET CODE: 3「GET CODE」でコードが発行され、貼り付けで完了になります。

使用方法について

先ほどのコードを実際に貼ってみます。
書き方は以下のようになります。

Icons Generato

Icons Generator 設定から設置までの流れを解説!
Google Fontsの設定から設置までの流れを解説!!
特定のファイルへのリンクだけにアイコンを指定しよう!

<ul>
	<li><i class='shape51'></i>Icons....</li>
	<li><i class='shape51'></i>Google....</li>
	<li><i class='shape51'></i>特定のファイルへ....</li>
</ul>

/*--CSS--*/
.shape51 {
  display: inline-block !important;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0);
  box-sizing: content-box;
  vertical-align: middle; /*--使用する箇所によっては指定--*/
}
.shape51:before {
  position: absolute;
  content: '';
  margin: auto;
  width: calc(30px/3.5);
  height: calc(30px/3.5);
  background: rgba(0, 0, 0, 0);
  border: calc(30px/8) solid #666666;
  border-right: none;
  border-top: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(30px/8);
  transform: rotate(-135deg);
  box-sizing: content-box;
}

サイズを変更するには

サイズを変更するには、以下のCSSを変更します。
書き方は以下のようになります。

/*--CSS--*/
.shape51 {
  /*--一部省略--*/
  width: 30px;
  height: 30px;
}
.shape51:before {
  /*--一部省略--*/
  width: calc(30px/3.5);
  height: calc(30px/3.5);
  border: calc(30px/8) solid #666666;
  right: calc(30px/8);
}

/*--サイズ変更--*/

.shape51 {
  /*--一部省略--*/
  width: 50px;
  height: 50px;
}
.shape51:before {
  /*--一部省略--*/
  width: calc(50px/3.5);
  height: calc(50px/3.5);
  border: calc(50px/8) solid #666666;
  right: calc(50px/8);
}

計6ヶ所になります。
ジェネレーターで再発行しても問題ありません。

カラーを変更するには

カラーを変更するには、以下のCSSを変更します。
書き方は以下のようになります。

/*--CSS--*/
.shape51:before {
  /*--一部省略--*/
  border: calc(30px/8) solid #666666;
}

/*--カラー変更--*/

.shape51:before {
  /*--一部省略--*/
 border: calc(30px/8) solid #FF0000;
}

1ヶ所になります。
ジェネレーターで再発行しても問題ありません。