アイコンを使用する

フォントの画像を使用する

アイコンを探すには

使用するフォントにより多少の違いはありますが、下記のサイトで探すと便利です。

下記をクリックすると別ページで開きます。

絵文字をコピーして貼り付けるか「&#x」付のコード(5桁)を記入します。

文字列の中に画像を入れるには

文字列の中に画像を入れたい場合は

アイコンをコピーして直接貼り付ける。
文字コードの前に「&#x」を、後ろに「;」を付ける。

　　文字コードと　画像表示の例

🍀　⇒　🍀
🍁　⇒　🍁
🍂　⇒　🍂
🍃　⇒　🍃
🍄　⇒　🍄

fontAwesome5を使用する

fontAwesome5の使用法

FontAwsome(https://fontawesome.com/icons?d=gallery&m=free)よりアイコンを見つけコード(例えば)をコピーし、必要な場所に貼りつける。

標準の表示: 例えば「コーヒーカップ」の場合はと書く; このように表示→
色を付けたい場合: 下記のtableの色をclass名で登録してあるのでclassに追加する。青くしたければblueをclassに追加。と書く。; このように表示→
サイズを変更する場合: 大きくする場合はfa-lgを追加。このように表示→; 小さくする場合はfa-xsを追加。このように表示→; 小さくする場合はfa-smを追加。このように表示→; サイズを指定しない場合。このように表示→; 1倍の場合はfa-1xを追加。このように表示→; 2倍の場合はfa-2xを追加。このように表示→; 3倍の場合はfa-3xを追加。このように表示→; 4倍の場合はfa-4xを追加。このように表示→; 10倍までclassがあるので、fa-倍率の数字xを追加する
滑らかに回転させる場合: fa-spinを追加する。このように表示→
カタカタと回転させる場合: fa-pulseを追加する。このように表示→
枠を付ける場合: fa-borderを追加する。このように表示→
枠の真ん中に表示したい場合: fa-fwを追加する。このように表示→
傾けて表示する: 90°の場合はfa-rotate-90を追加する。このように表示→; 180°の場合はfa-rotate-180を追加する。このように表示→; 270°の場合はfa-rotate-180を追加する。このように表示→
反転表示する: 反転なし:; 上下に反転:fa-flip-verticalを追加; 左右に反転:fa-flip-horizontalを追加

動きをつけるには

下記表の15通りの動きができる: ベルのアイコンで見ると・・; 動きなし： ; 常に動く： ; 親の要素にカーソルが乗った時に動く：親要素のcssにfaa-parent animated-hoverを書いて、子の要素にfaa-wrenchを追加する親要素

FontAwsome5(https://fontawesome.com/icons?d=gallery&m=free)で使いたいアイコンを見つけコードをコピーし、下記エリアにに貼りつける。その後に、下記の動きのテーブルのセルをクリックすると動きのcssを付加したタグが表示されます。

コピーしたアイコンが下記で動きます。

動き	常に動作	親要素にカーソルが乗った時 faa-parent animated-hover
ひねり	faa-wrench animated	faa-wrench
鳴る	faa-ring animated	faa-ring
横揺れ	faa-horizontal animated	faa-horizontal
縦揺れ	faa-vertical animated	faa-vertical
点滅	faa-flash animated	faa-flash
跳ねる	faa-bounce animated	faa-bounce
回転	faa-spin animated	faa-spin
浮遊	faa-float animated	faa-float
鼓動	faa-pulse animated	faa-pulse
振る	faa-shake animated	faa-shake
ズーム	faa-tada animated	faa-tada
進行	faa-passing animated	faa-passing
逆行	faa-passing-reverse animated	faa-passing-reverse
破裂	faa-burst animated	faa-burst
沈下	faa-falling animated	faa-falling

着色するにはcssで登録したclassのcolor名を追加する

下記のtebleの色をcssで登録してあるので、classに下記のcolor名を追加すればfontを着色できます。

着色の例: 着色なし：; 青の場合：; 赤の場合：

登録した色とcssの名前

セルをクリックするとcssの名前をクリップボードにコピーされます！
black	aliceblue	darkcyan	lightyellow	coral
dimgray	lavender	teal	lightgoldenrodyellow	tomato
gray	lightsteelblue	darkslategray	lemonchiffon	orangered
darkgray	lightslategray	darkgreen	wheat	red
silver	slategray	green	burlywood	crimson
lightgray	steelblue	forestgreen	tan	mediumvioletred
gainsboro	royalblue	seagreen	khaki	deeppink
whitesmoke	midnightblue	mediumseagreen	yellow	hotpink
white	navy	mediumaquamarine	gold	palevioletred
snow	darkblue	darkseagreen	orange	pink
ghostwhite	mediumblue	aquamarine	sandybrown	lightpink
floralwhite	blue	palegreen	darkorange	thistle
linen	dodgerblue	lightgreen	goldenrod	magenta
antiquewhite	cornflowerblue	springgreen	peru	fuchsia
papayawhip	deepskyblue	mediumspringgreen	darkgoldenrod	violet
blanchedalmond	lightskyblue	lawngreen	chocolate	plum
bisque	skyblue	chartreuse	sienna	orchid
moccasin	lightblue	greenyellow	saddlebrown	mediumorchid
navajowhite	powderblue	lime	maroon	darkorchid
peachpuff	paleturquoise	limegreen	darkred	darkviolet
mistyrose	lightcyan	yellowgreen	brown	darkmagenta
lavenderblush	cyan	darkolivegreen	firebrick	purple
seashell	aqua	olivedrab	indianred	indigo
oldlace	turquoise	olive	rosybrown	darkslateblue
ivory	mediumturquoise	darkkhaki	darksalmon	blueviolet
honeydew	darkturquoise	palegoldenrod	lightcoral	mediumpurple
mintcream	lightseagreen	cornsilk	salmon	slateblue
azure	cadetblue	beige	lightsalmon	mediumslateblue

Material Design Iconsを使う

「Material Design Icons」を使うには、HTMLのヘッダー内（head要素内）に下記のコードを入れるだけでOK

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Material Design Iconsのアイコンを探す
広くアイコンを探す
Material Design Iconsの使い方とカスタマイズ法
SVGの基礎知識と編集方法

jQuery-uiを使う

アイコンのサイズ変更が現時点ではできない。

使用方法: 要素のclassに"ui-icon"と表示したいアイコンのclassを指定する。例えばごみ箱アイコンの場合はと書くとのように表示できる。; ボタンのように囲みが必要ならと書くとと表示できる。

jQueryのアイコン

クリックするとアイコンのタグがクリップボードにcopyされ、下記のテキストボックスにアイコンのタグが表示され、その下にタグによってアイコンが表示されます。