カテゴリ別に表示出来ます
-
＞＞見出しのアイコンをテキストキャラクターで代用する(2) アイコンで装飾
■見出しにアイコンをつける（テキストキャラクター2）
※ サンプルにするまでもないのですが、最もシンプルなテキスト利用例です。
htmlコーディングの超初心者向け？です。 (^_^;)[ 閉じる ]
htmlソース
<h4 class="icon-ex9"> <span>■</span>見出しにアイコンをつける（テキストキャラクター2） </h4>
CSS
.icon-ex9{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex9 span { font-size: 0.9em; color: pink; padding-right: 8px; }
-
＞＞見出しにbefore疑似要素でアイコンを設定する(SVG版) アイコンで装飾
見出しにbefore疑似要素でアイコンを指定する
※ before疑似要素でアイコンを指定する。
このSVGはMITライセンスでの利用となります。 Copyright TopeconHeroes ! all right reserved.
他にもアイコンがいっぱいあります。 https://icooon-mono.com/[ 閉じる ]
htmlソース
<h4 class="icon-ex8"> 見出しにbefore疑似要素でアイコンを指定する </h4>
CSS
.icon-ex8{ font-size: 20px; font-weight: normal; color: #333; padding: 1rem; display: flex; align-items: center; height: 36px; } .icon-ex8::before { content: ''; width: 20px; height: 20px; background: url('/sysdata/images/sample/constract_ico.svg') no-repeat; background-size: contain; padding-right: 8px; }