SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2021.08.17
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【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の使い方

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

CSS Shapes and Icons Generator
1http://androidcss.com/css-shape-icon-generator/
CSS Shapes and Icons 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ヶ所になります。
ジェネレーターで再発行しても問題ありません。

メリット

次に、「CSS Shapes and Icons Generator」のメリットについて解説します。

メリット
  • 設定が簡単
    上記で解説したように、STEP03で完結するため設定がとても簡単です。
  • 登録などが不要
    会員登録、有料コンテンツではない為、利用しやすいです。
  • 変更が簡単
    「サイズ」、「カラー」の変更がとても簡単にできます。
  • 画像との違い
    画像の荒れ、サイズ違いがなくなります。

デメリット

次に、「CSS Shapes and Icons Generator」のメリットについて解説します。

デメリット
  • コードが長い
    コードが長い為、他人が見た場合、少し複雑かもしれません。
  • アイコンの種類
    お好みのアイコンがない場合があります。
    その場合は「FontAwsome」を利用しましょう。

まとめ

今回はこれで以上になります。

POINT
  • CSS Shapes and Icons Generatorとは、無料で利用可能なアイコンのサービスです。
  • ユーザー登録などは不要です、無料で利用可能です。
  • デメリットとメリットはしっかり理解しておきましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top