ウェブアイコン「Typicons」のご紹介
今回はウェブアイコン「Typicons」を紹介したいと思います。
Contents
ウェブアイコン「Typicons」のご紹介
利用できるアイコンは「v 2.1.1」時点で、３３６種類です。
インストール方法
Typiconsのページに行って「DOWNLOAD」をクリックしてください。
または「GITHUB」のページからダウンロードしてもいいと思いますがここでは「DOWNLOAD」をクリックすることとします。
「DOWNLOAD」をクリックするとGitHubのページに飛び、ZIP形式の書庫ファイルをダウンロードできますので、「Source code(zip)」をクリックして、ZIPファイルをダウンロードしてください。
ダウンロードした書庫ファイルを解凍し、展開すると以下のようになります。
導入方法
CSSファイルインクルード
展開した書庫ファイルの「src」→「font」の下にある『typicons.css』を読み込んでください。
<link rel='stylesheet' href='/assets/typicons.font-2.1.2/src/font/typicons.css' />HTMLマークアップ
spanタグでclassに「typcn」と指定したいアイコンのクラスを定義してください。矢印アイコンの「typcn-arrow-back-outline」を利用したい場合には以下のようにコーディングしてください。
<span class="typcn typcn-arrow-back-outline"></span>サイズを変更する
CSSクラス指定
サイズを変更したい場合には、以下のようなクラスが用意されています。
| （なし） | <span class="typcn typcn-adjust-brightness"></span> | |
| typcn-lg | <span class="typcn typcn-lg typcn-adjust-brightness"></span> | |
| typcn-2x | <span class="typcn typcn-2x typcn-adjust-brightness"></span> | |
| typcn-3x | <span class="typcn typcn-3x typcn-adjust-brightness"></span> | |
| typcn-4x | <span class="typcn typcn-4x typcn-adjust-brightness"></span> | |
| typcn-5x | <span class="typcn typcn-5x typcn-adjust-brightness"></span> |
フォントサイズで指定
| （なし） | <span class=”typcn typcn-adjust-brightness”></span> | |
| 8px | <span class=”typcn typcn-adjust-brightness” style=”font-size:8px”></span> | |
| 16px | <span class=”typcn typcn-adjust-brightness” style=”font-size:16px”></span> | |
| 32px | <span class=”typcn typcn-adjust-brightness” style=”font-size:32px”></span> | |
| 64px | <span class=”typcn typcn-adjust-brightness” style=”font-size:64px”></span> |
色を変更する
styleでcolorを指定すれば、色を変更することもできます。
| （なし） | <span class=”typcn typcn-adjust-brightness”></span> | |
| red | <span class=”typcn typcn-adjust-brightness” style=”color:red”></span> | |
| yellow | <span class=”typcn typcn-adjust-brightness” style=”color:yellow”></span> | |
| blue | <span class=”typcn typcn-adjust-brightness” style=”color:blue”></span> | |
| green | <span class=”typcn typcn-adjust-brightness” style=”color:green”></span> |
全アイコン紹介
最後にv 2.1.2.のアイコンすべてを紹介しておきます。
| typcn-adjust-brightness | <span class="typcn typcn-adjust-brightness"></span> | |
| typcn-adjust-contrast | <span class="typcn typcn-adjust-contrast"></span> | |
| typcn-anchor-outline | <span class="typcn typcn-anchor-outline"></span> | |
| typcn-anchor | <span class="typcn typcn-anchor"></span> | |
| typcn-archive | <span class="typcn typcn-archive"></span> | |
| typcn-arrow-back-outline | <span class="typcn typcn-arrow-back-outline"></span> | |
| typcn-arrow-back | <span class="typcn typcn-arrow-back"></span> | |
| typcn-arrow-down-outline | <span class="typcn typcn-arrow-down-outline"></span> | |
| typcn-arrow-down-thick | <span class="typcn typcn-arrow-down-thick"></span> | |
| typcn-arrow-down | <span class="typcn typcn-arrow-down"></span> | |
| typcn-arrow-forward-outline | <span class="typcn typcn-arrow-forward-outline"></span> | |
| typcn-arrow-forward | <span class="typcn typcn-arrow-forward"></span> | |
| typcn-arrow-left-outline | <span class="typcn typcn-arrow-left-outline"></span> | |
| typcn-arrow-left-thick | <span class="typcn typcn-arrow-left-thick"></span> | |
| typcn-arrow-left | <span class="typcn typcn-arrow-left"></span> | |
| typcn-arrow-loop-outline | <span class="typcn typcn-arrow-loop-outline"></span> | |
| typcn-arrow-loop | <span class="typcn typcn-arrow-loop"></span> | |
| typcn-arrow-maximise-outline | <span class="typcn typcn-arrow-maximise-outline"></span> | |
| typcn-arrow-maximise | <span class="typcn typcn-arrow-maximise"></span> | |
| typcn-arrow-minimise-outline | <span class="typcn typcn-arrow-minimise-outline"></span> | |
| typcn-arrow-minimise | <span class="typcn typcn-arrow-minimise"></span> | |
| typcn-arrow-move-outline | <span class="typcn typcn-arrow-move-outline"></span> | |
| typcn-arrow-move | <span class="typcn typcn-arrow-move"></span> | |
| typcn-arrow-repeat-outline | <span class="typcn typcn-arrow-repeat-outline"></span> | |
| typcn-arrow-repeat | <span class="typcn typcn-arrow-repeat"></span> | |
| typcn-arrow-right-outline | <span class="typcn typcn-arrow-right-outline"></span> | |
| typcn-arrow-right-thick | <span class="typcn typcn-arrow-right-thick"></span> | |
| typcn-arrow-right | <span class="typcn typcn-arrow-right"></span> | |
| typcn-arrow-shuffle | <span class="typcn typcn-arrow-shuffle"></span> | |
| typcn-arrow-sorted-down | <span class="typcn typcn-arrow-sorted-down"></span> | |
| typcn-arrow-sorted-up | <span class="typcn typcn-arrow-sorted-up"></span> | |
| typcn-arrow-sync-outline | <span class="typcn typcn-arrow-sync-outline"></span> | |
| typcn-arrow-sync | <span class="typcn typcn-arrow-sync"></span> | |
| typcn-arrow-unsorted | <span class="typcn typcn-arrow-unsorted"></span> | |
| typcn-arrow-up-outline | <span class="typcn typcn-arrow-up-outline"></span> | |
| typcn-arrow-up-thick | <span class="typcn typcn-arrow-up-thick"></span> | |
| typcn-arrow-up | <span class="typcn typcn-arrow-up"></span> | |
| typcn-at | <span class="typcn typcn-at"></span> | |
| typcn-attachment-outline | <span class="typcn typcn-attachment-outline"></span> | |
| typcn-attachment | <span class="typcn typcn-attachment"></span> | |
| typcn-backspace-outline | <span class="typcn typcn-backspace-outline"></span> | |
| typcn-backspace | <span class="typcn typcn-backspace"></span> | |
| typcn-battery-charge | <span class="typcn typcn-battery-charge"></span> | |
| typcn-battery-full | <span class="typcn typcn-battery-full"></span> | |
| typcn-battery-high | <span class="typcn typcn-battery-high"></span> | |
| typcn-battery-low | <span class="typcn typcn-battery-low"></span> | |
| typcn-battery-mid | <span class="typcn typcn-battery-mid"></span> | |
| typcn-beaker | <span class="typcn typcn-beaker"></span> | |
| typcn-beer | <span class="typcn typcn-beer"></span> | |
| typcn-bell | <span class="typcn typcn-bell"></span> | |
| typcn-book | <span class="typcn typcn-book"></span> | |
| typcn-bookmark | <span class="typcn typcn-bookmark"></span> | |
| typcn-briefcase | <span class="typcn typcn-briefcase"></span> | |
| typcn-brush | <span class="typcn typcn-brush"></span> | |
| typcn-business-card | <span class="typcn typcn-business-card"></span> | |
| typcn-calculator | <span class="typcn typcn-calculator"></span> | |
| typcn-calendar-outline | <span class="typcn typcn-calendar-outline"></span> | |
| typcn-calendar | <span class="typcn typcn-calendar"></span> | |
| typcn-camera-outline | <span class="typcn typcn-camera-outline"></span> | |
| typcn-camera | <span class="typcn typcn-camera"></span> | |
| typcn-cancel-outline | <span class="typcn typcn-cancel-outline"></span> | |
| typcn-cancel | <span class="typcn typcn-cancel"></span> | |
| typcn-chart-area-outline | <span class="typcn typcn-chart-area-outline"></span> | |
| typcn-chart-area | <span class="typcn typcn-chart-area"></span> | |
| typcn-chart-bar-outline | <span class="typcn typcn-chart-bar-outline"></span> | |
| typcn-chart-bar | <span class="typcn typcn-chart-bar"></span> | |
| typcn-chart-line-outline | <span class="typcn typcn-chart-line-outline"></span> | |
| typcn-chart-line | <span class="typcn typcn-chart-line"></span> | |
| typcn-chart-pie-outline | <span class="typcn typcn-chart-pie-outline"></span> | |
| typcn-chart-pie | <span class="typcn typcn-chart-pie"></span> | |
| typcn-chevron-left-outline | <span class="typcn typcn-chevron-left-outline"></span> | |
| typcn-chevron-left | <span class="typcn typcn-chevron-left"></span> | |
| typcn-chevron-right-outline | <span class="typcn typcn-chevron-right-outline"></span> | |
| typcn-chevron-right | <span class="typcn typcn-chevron-right"></span> | |
| typcn-clipboard | <span class="typcn typcn-clipboard"></span> | |
| typcn-cloud-storage | <span class="typcn typcn-cloud-storage"></span> | |
| typcn-cloud-storage-outline | <span class="typcn typcn-cloud-storage-outline"></span> | |
| typcn-code-outline | <span class="typcn typcn-code-outline"></span> | |
| typcn-code | <span class="typcn typcn-code"></span> | |
| typcn-coffee | <span class="typcn typcn-coffee"></span> | |
| typcn-cog-outline | <span class="typcn typcn-cog-outline"></span> | |
| typcn-cog | <span class="typcn typcn-cog"></span> | |
| typcn-compass | <span class="typcn typcn-compass"></span> | |
| typcn-contacts | <span class="typcn typcn-contacts"></span> | |
| typcn-credit-card | <span class="typcn typcn-credit-card"></span> | |
| typcn-css3 | <span class="typcn typcn-css3"></span> | |
| typcn-database | <span class="typcn typcn-database"></span> | |
| typcn-delete-outline | <span class="typcn typcn-delete-outline"></span> | |
| typcn-delete | <span class="typcn typcn-delete"></span> | |
| typcn-device-desktop | <span class="typcn typcn-device-desktop"></span> | |
| typcn-device-laptop | <span class="typcn typcn-device-laptop"></span> | |
| typcn-device-phone | <span class="typcn typcn-device-phone"></span> | |
| typcn-device-tablet | <span class="typcn typcn-device-tablet"></span> | |
| typcn-directions | <span class="typcn typcn-directions"></span> | |
| typcn-divide-outline | <span class="typcn typcn-divide-outline"></span> | |
| typcn-divide | <span class="typcn typcn-divide"></span> | |
| typcn-document-add | <span class="typcn typcn-document-add"></span> | |
| typcn-document-delete | <span class="typcn typcn-document-delete"></span> | |
| typcn-document-text | <span class="typcn typcn-document-text"></span> | |
| typcn-document | <span class="typcn typcn-document"></span> | |
| typcn-download-outline | <span class="typcn typcn-download-outline"></span> | |
| typcn-download | <span class="typcn typcn-download"></span> | |
| typcn-dropbox | <span class="typcn typcn-dropbox"></span> | |
| typcn-edit | <span class="typcn typcn-edit"></span> | |
| typcn-eject-outline | <span class="typcn typcn-eject-outline"></span> | |
| typcn-eject | <span class="typcn typcn-eject"></span> | |
| typcn-equals-outline | <span class="typcn typcn-equals-outline"></span> | |
| typcn-equals | <span class="typcn typcn-equals"></span> | |
| typcn-export-outline | <span class="typcn typcn-export-outline"></span> | |
| typcn-export | <span class="typcn typcn-export"></span> | |
| typcn-eye-outline | <span class="typcn typcn-eye-outline"></span> | |
| typcn-eye | <span class="typcn typcn-eye"></span> | |
| typcn-feather | <span class="typcn typcn-feather"></span> | |
| typcn-film | <span class="typcn typcn-film"></span> | |
| typcn-filter | <span class="typcn typcn-filter"></span> | |
| typcn-flag-outline | <span class="typcn typcn-flag-outline"></span> | |
| typcn-flag | <span class="typcn typcn-flag"></span> | |
| typcn-flash-outline | <span class="typcn typcn-flash-outline"></span> | |
| typcn-flash | <span class="typcn typcn-flash"></span> | |
| typcn-flow-children | <span class="typcn typcn-flow-children"></span> | |
| typcn-flow-merge | <span class="typcn typcn-flow-merge"></span> | |
| typcn-flow-parallel | <span class="typcn typcn-flow-parallel"></span> | |
| typcn-flow-switch | <span class="typcn typcn-flow-switch"></span> | |
| typcn-folder-add | <span class="typcn typcn-folder-add"></span> | |
| typcn-folder-delete | <span class="typcn typcn-folder-delete"></span> | |
| typcn-folder-open | <span class="typcn typcn-folder-open"></span> | |
| typcn-folder | <span class="typcn typcn-folder"></span> | |
| typcn-gift | <span class="typcn typcn-gift"></span> | |
| typcn-globe-outline | <span class="typcn typcn-globe-outline"></span> | |
| typcn-globe | <span class="typcn typcn-globe"></span> | |
| typcn-group-outline | <span class="typcn typcn-group-outline"></span> | |
| typcn-group | <span class="typcn typcn-group"></span> | |
| typcn-headphones | <span class="typcn typcn-headphones"></span> | |
| typcn-heart-full-outline | <span class="typcn typcn-heart-full-outline"></span> | |
| typcn-heart-half-outline | <span class="typcn typcn-heart-half-outline"></span> | |
| typcn-heart-outline | <span class="typcn typcn-heart-outline"></span> | |
| typcn-heart | <span class="typcn typcn-heart"></span> | |
| typcn-home-outline | <span class="typcn typcn-home-outline"></span> | |
| typcn-home | <span class="typcn typcn-home"></span> | |
| typcn-html5 | <span class="typcn typcn-html5"></span> | |
| typcn-image-outline | <span class="typcn typcn-image-outline"></span> | |
| typcn-image | <span class="typcn typcn-image"></span> | |
| typcn-infinity-outline | <span class="typcn typcn-infinity-outline"></span> | |
| typcn-infinity | <span class="typcn typcn-infinity"></span> | |
| typcn-info-large-outline | <span class="typcn typcn-info-large-outline"></span> | |
| typcn-info-large | <span class="typcn typcn-info-large"></span> | |
| typcn-info-outline | <span class="typcn typcn-info-outline"></span> | |
| typcn-info | <span class="typcn typcn-info"></span> | |
| typcn-input-checked-outline | <span class="typcn typcn-input-checked-outline"></span> | |
| typcn-input-checked | <span class="typcn typcn-input-checked"></span> | |
| typcn-key-outline | <span class="typcn typcn-key-outline"></span> | |
| typcn-key | <span class="typcn typcn-key"></span> | |
| typcn-keyboard | <span class="typcn typcn-keyboard"></span> | |
| typcn-leaf | <span class="typcn typcn-leaf"></span> | |
| typcn-lightbulb | <span class="typcn typcn-lightbulb"></span> | |
| typcn-link-outline | <span class="typcn typcn-link-outline"></span> | |
| typcn-link | <span class="typcn typcn-link"></span> | |
| typcn-location-arrow-outline | <span class="typcn typcn-location-arrow-outline"></span> | |
| typcn-location-arrow | <span class="typcn typcn-location-arrow"></span> | |
| typcn-location-outline | <span class="typcn typcn-location-outline"></span> | |
| typcn-location | <span class="typcn typcn-location"></span> | |
| typcn-lock-closed-outline | <span class="typcn typcn-lock-closed-outline"></span> | |
| typcn-lock-closed | <span class="typcn typcn-lock-closed"></span> | |
| typcn-lock-open-outline | <span class="typcn typcn-lock-open-outline"></span> | |
| typcn-lock-open | <span class="typcn typcn-lock-open"></span> | |
| typcn-mail | <span class="typcn typcn-mail"></span> | |
| typcn-map | <span class="typcn typcn-map"></span> | |
| typcn-media-eject-outline | <span class="typcn typcn-media-eject-outline"></span> | |
| typcn-media-eject | <span class="typcn typcn-media-eject"></span> | |
| typcn-media-fast-forward-outline | <span class="typcn typcn-media-fast-forward-outline"></span> | |
| typcn-media-fast-forward | <span class="typcn typcn-media-fast-forward"></span> | |
| typcn-media-pause-outline | <span class="typcn typcn-media-pause-outline"></span> | |
| typcn-media-pause | <span class="typcn typcn-media-pause"></span> | |
| typcn-media-play-outline | <span class="typcn typcn-media-play-outline"></span> | |
| typcn-media-play-reverse-outline | <span class="typcn typcn-media-play-reverse-outline"></span> | |
| typcn-media-play-reverse | <span class="typcn typcn-media-play-reverse"></span> | |
| typcn-media-play | <span class="typcn typcn-media-play"></span> | |
| typcn-media-record-outline | <span class="typcn typcn-media-record-outline"></span> | |
| typcn-media-record | <span class="typcn typcn-media-record"></span> | |
| typcn-media-rewind-outline | <span class="typcn typcn-media-rewind-outline"></span> | |
| typcn-media-rewind | <span class="typcn typcn-media-rewind"></span> | |
| typcn-media-stop-outline | <span class="typcn typcn-media-stop-outline"></span> | |
| typcn-media-stop | <span class="typcn typcn-media-stop"></span> | |
| typcn-message-typing | <span class="typcn typcn-message-typing"></span> | |
| typcn-message | <span class="typcn typcn-message"></span> | |
| typcn-messages | <span class="typcn typcn-messages"></span> | |
| typcn-microphone-outline | <span class="typcn typcn-microphone-outline"></span> | |
| typcn-microphone | <span class="typcn typcn-microphone"></span> | |
| typcn-minus-outline | <span class="typcn typcn-minus-outline"></span> | |
| typcn-minus | <span class="typcn typcn-minus"></span> | |
| typcn-mortar-board | <span class="typcn typcn-mortar-board"></span> | |
| typcn-news | <span class="typcn typcn-news"></span> | |
| typcn-notes-outline | <span class="typcn typcn-notes-outline"></span> | |
| typcn-notes | <span class="typcn typcn-notes"></span> | |
| typcn-pen | <span class="typcn typcn-pen"></span> | |
| typcn-pencil | <span class="typcn typcn-pencil"></span> | |
| typcn-phone-outline | <span class="typcn typcn-phone-outline"></span> | |
| typcn-phone | <span class="typcn typcn-phone"></span> | |
| typcn-pi-outline | <span class="typcn typcn-pi-outline"></span> | |
| typcn-pi | <span class="typcn typcn-pi"></span> | |
| typcn-pin-outline | <span class="typcn typcn-pin-outline"></span> | |
| typcn-pin | <span class="typcn typcn-pin"></span> | |
| typcn-pipette | <span class="typcn typcn-pipette"></span> | |
| typcn-plane-outline | <span class="typcn typcn-plane-outline"></span> | |
| typcn-plane | <span class="typcn typcn-plane"></span> | |
| typcn-plug | <span class="typcn typcn-plug"></span> | |
| typcn-plus-outline | <span class="typcn typcn-plus-outline"></span> | |
| typcn-plus | <span class="typcn typcn-plus"></span> | |
| typcn-point-of-interest-outline | <span class="typcn typcn-point-of-interest-outline"></span> | |
| typcn-point-of-interest | <span class="typcn typcn-point-of-interest"></span> | |
| typcn-power-outline | <span class="typcn typcn-power-outline"></span> | |
| typcn-power | <span class="typcn typcn-power"></span> | |
| typcn-printer | <span class="typcn typcn-printer"></span> | |
| typcn-puzzle-outline | <span class="typcn typcn-puzzle-outline"></span> | |
| typcn-puzzle | <span class="typcn typcn-puzzle"></span> | |
| typcn-radar-outline | <span class="typcn typcn-radar-outline"></span> | |
| typcn-radar | <span class="typcn typcn-radar"></span> | |
| typcn-refresh-outline | <span class="typcn typcn-refresh-outline"></span> | |
| typcn-refresh | <span class="typcn typcn-refresh"></span> | |
| typcn-rss-outline | <span class="typcn typcn-rss-outline"></span> | |
| typcn-rss | <span class="typcn typcn-rss"></span> | |
| typcn-scissors-outline | <span class="typcn typcn-scissors-outline"></span> | |
| typcn-scissors | <span class="typcn typcn-scissors"></span> | |
| typcn-shopping-bag | <span class="typcn typcn-shopping-bag"></span> | |
| typcn-shopping-cart | <span class="typcn typcn-shopping-cart"></span> | |
| typcn-social-at-circular | <span class="typcn typcn-social-at-circular"></span> | |
| typcn-social-dribbble-circular | <span class="typcn typcn-social-dribbble-circular"></span> | |
| typcn-social-dribbble | <span class="typcn typcn-social-dribbble"></span> | |
| typcn-social-facebook-circular | <span class="typcn typcn-social-facebook-circular"></span> | |
| typcn-social-facebook | <span class="typcn typcn-social-facebook"></span> | |
| typcn-social-flickr-circular | <span class="typcn typcn-social-flickr-circular"></span> | |
| typcn-social-flickr | <span class="typcn typcn-social-flickr"></span> | |
| typcn-social-github-circular | <span class="typcn typcn-social-github-circular"></span> | |
| typcn-social-github | <span class="typcn typcn-social-github"></span> | |
| typcn-social-google-plus-circular | <span class="typcn typcn-social-google-plus-circular"></span> | |
| typcn-social-google-plus | <span class="typcn typcn-social-google-plus"></span> | |
| typcn-social-instagram-circular | <span class="typcn typcn-social-instagram-circular"></span> | |
| typcn-social-instagram | <span class="typcn typcn-social-instagram"></span> | |
| typcn-social-last-fm-circular | <span class="typcn typcn-social-last-fm-circular"></span> | |
| typcn-social-last-fm | <span class="typcn typcn-social-last-fm"></span> | |
| typcn-social-linkedin-circular | <span class="typcn typcn-social-linkedin-circular"></span> | |
| typcn-social-linkedin | <span class="typcn typcn-social-linkedin"></span> | |
| typcn-social-pinterest-circular | <span class="typcn typcn-social-pinterest-circular"></span> | |
| typcn-social-pinterest | <span class="typcn typcn-social-pinterest"></span> | |
| typcn-social-skype-outline | <span class="typcn typcn-social-skype-outline"></span> | |
| typcn-social-skype | <span class="typcn typcn-social-skype"></span> | |
| typcn-social-tumbler-circular | <span class="typcn typcn-social-tumbler-circular"></span> | |
| typcn-social-tumbler | <span class="typcn typcn-social-tumbler"></span> | |
| typcn-social-twitter-circular | <span class="typcn typcn-social-twitter-circular"></span> | |
| typcn-social-twitter | <span class="typcn typcn-social-twitter"></span> | |
| typcn-social-vimeo-circular | <span class="typcn typcn-social-vimeo-circular"></span> | |
| typcn-social-vimeo | <span class="typcn typcn-social-vimeo"></span> | |
| typcn-social-youtube-circular | <span class="typcn typcn-social-youtube-circular"></span> | |
| typcn-social-youtube | <span class="typcn typcn-social-youtube"></span> | |
| typcn-sort-alphabetically-outline | <span class="typcn typcn-sort-alphabetically-outline"></span> | |
| typcn-sort-alphabetically | <span class="typcn typcn-sort-alphabetically"></span> | |
| typcn-sort-numerically-outline | <span class="typcn typcn-sort-numerically-outline"></span> | |
| typcn-sort-numerically | <span class="typcn typcn-sort-numerically"></span> | |
| typcn-spanner-outline | <span class="typcn typcn-spanner-outline"></span> | |
| typcn-spanner | <span class="typcn typcn-spanner"></span> | |
| typcn-spiral | <span class="typcn typcn-spiral"></span> | |
| typcn-star-full-outline | <span class="typcn typcn-star-full-outline"></span> | |
| typcn-star-half-outline | <span class="typcn typcn-star-half-outline"></span> | |
| typcn-star-half | <span class="typcn typcn-star-half"></span> | |
| typcn-star-outline | <span class="typcn typcn-star-outline"></span> | |
| typcn-star | <span class="typcn typcn-star"></span> | |
| typcn-starburst-outline | <span class="typcn typcn-starburst-outline"></span> | |
| typcn-starburst | <span class="typcn typcn-starburst"></span> | |
| typcn-stopwatch | <span class="typcn typcn-stopwatch"></span> | |
| typcn-support | <span class="typcn typcn-support"></span> | |
| typcn-tabs-outline | <span class="typcn typcn-tabs-outline"></span> | |
| typcn-tag | <span class="typcn typcn-tag"></span> | |
| typcn-tags | <span class="typcn typcn-tags"></span> | |
| typcn-th-large-outline | <span class="typcn typcn-th-large-outline"></span> | |
| typcn-th-large | <span class="typcn typcn-th-large"></span> | |
| typcn-th-list-outline | <span class="typcn typcn-th-list-outline"></span> | |
| typcn-th-list | <span class="typcn typcn-th-list"></span> | |
| typcn-th-menu-outline | <span class="typcn typcn-th-menu-outline"></span> | |
| typcn-th-menu | <span class="typcn typcn-th-menu"></span> | |
| typcn-th-small-outline | <span class="typcn typcn-th-small-outline"></span> | |
| typcn-th-small | <span class="typcn typcn-th-small"></span> | |
| typcn-thermometer | <span class="typcn typcn-thermometer"></span> | |
| typcn-thumbs-down | <span class="typcn typcn-thumbs-down"></span> | |
| typcn-thumbs-ok | <span class="typcn typcn-thumbs-ok"></span> | |
| typcn-thumbs-up | <span class="typcn typcn-thumbs-up"></span> | |
| typcn-tick-outline | <span class="typcn typcn-tick-outline"></span> | |
| typcn-tick | <span class="typcn typcn-tick"></span> | |
| typcn-ticket | <span class="typcn typcn-ticket"></span> | |
| typcn-time | <span class="typcn typcn-time"></span> | |
| typcn-times-outline | <span class="typcn typcn-times-outline"></span> | |
| typcn-times | <span class="typcn typcn-times"></span> | |
| typcn-trash | <span class="typcn typcn-trash"></span> | |
| typcn-tree | <span class="typcn typcn-tree"></span> | |
| typcn-upload-outline | <span class="typcn typcn-upload-outline"></span> | |
| typcn-upload | <span class="typcn typcn-upload"></span> | |
| typcn-user-add-outline | <span class="typcn typcn-user-add-outline"></span> | |
| typcn-user-add | <span class="typcn typcn-user-add"></span> | |
| typcn-user-delete-outline | <span class="typcn typcn-user-delete-outline"></span> | |
| typcn-user-delete | <span class="typcn typcn-user-delete"></span> | |
| typcn-user-outline | <span class="typcn typcn-user-outline"></span> | |
| typcn-user | <span class="typcn typcn-user"></span> | |
| typcn-vendor-android | <span class="typcn typcn-vendor-android"></span> | |
| typcn-vendor-apple | <span class="typcn typcn-vendor-apple"></span> | |
| typcn-vendor-microsoft | <span class="typcn typcn-vendor-microsoft"></span> | |
| typcn-video-outline | <span class="typcn typcn-video-outline"></span> | |
| typcn-video | <span class="typcn typcn-video"></span> | |
| typcn-volume-down | <span class="typcn typcn-volume-down"></span> | |
| typcn-volume-mute | <span class="typcn typcn-volume-mute"></span> | |
| typcn-volume-up | <span class="typcn typcn-volume-up"></span> | |
| typcn-volume | <span class="typcn typcn-volume"></span> | |
| typcn-warning-outline | <span class="typcn typcn-warning-outline"></span> | |
| typcn-warning | <span class="typcn typcn-warning"></span> | |
| typcn-watch | <span class="typcn typcn-watch"></span> | |
| typcn-waves-outline | <span class="typcn typcn-waves-outline"></span> | |
| typcn-waves | <span class="typcn typcn-waves"></span> | |
| typcn-weather-cloudy | <span class="typcn typcn-weather-cloudy"></span> | |
| typcn-weather-downpour | <span class="typcn typcn-weather-downpour"></span> | |
| typcn-weather-night | <span class="typcn typcn-weather-night"></span> | |
| typcn-weather-partly-sunny | <span class="typcn typcn-weather-partly-sunny"></span> | |
| typcn-weather-shower | <span class="typcn typcn-weather-shower"></span> | |
| typcn-weather-snow | <span class="typcn typcn-weather-snow"></span> | |
| typcn-weather-stormy | <span class="typcn typcn-weather-stormy"></span> | |
| typcn-weather-sunny | <span class="typcn typcn-weather-sunny"></span> | |
| typcn-weather-windy-cloudy | <span class="typcn typcn-weather-windy-cloudy"></span> | |
| typcn-weather-windy | <span class="typcn typcn-weather-windy"></span> | |
| typcn-wi-fi-outline | <span class="typcn typcn-wi-fi-outline"></span> | |
| typcn-wi-fi | <span class="typcn typcn-wi-fi"></span> | |
| typcn-wine | <span class="typcn typcn-wine"></span> | |
| typcn-world-outline | <span class="typcn typcn-world-outline"></span> | |
| typcn-world | <span class="typcn typcn-world"></span> | |
| typcn-zoom-in-outline | <span class="typcn typcn-zoom-in-outline"></span> | |
| typcn-zoom-in | <span class="typcn typcn-zoom-in"></span> | |
| typcn-zoom-out-outline | <span class="typcn typcn-zoom-out-outline"></span> | |
| typcn-zoom-out | <span class="typcn typcn-zoom-out"></span> | |
| typcn-zoom-outline | <span class="typcn typcn-zoom-outline"></span> | |
| typcn-zoom | <span class="typcn typcn-zoom"></span> |
ご参考
関連ページ
- ウェブアイコン「Font Awesome」の導入方法
- ウェブアイコン「Font Awesome」『Version 6』の紹介
- Google Fonts Iconsの紹介
- jQuery UI のウェブアイコン（Icons）を紹介
- ウェブアイコン「Ionicons」のご紹介
- ウェブアイコン「Foundation Icon Fonts 3」のご紹介
- Bootstrap Iconsの紹介
