今回は【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」にアクセスしましょう。
ユーザー登録などは不要です、無料で利用可能です。
アイコンの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」のメリットについて解説します。
まとめ
今回はこれで以上になります。
- POINT
- CSS Shapes and Icons Generatorとは、無料で利用可能なアイコンのサービスです。
- ユーザー登録などは不要です、無料で利用可能です。
- デメリットとメリットはしっかり理解しておきましょう。
スポンサーリンク

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