無料アイコンの使用方法

初期費用無料ホームページ作成サイト - FunMaker[ファンメイカー]では、当サービスをご利用のお客様のために、無料で使える様々なアイコンをご用意しています。
利用の仕方は、管理画面HOMEの『カスタマイズ』機能一覧の中から、『CSSの編集』機能を選択し、目的に合わせて、以下のコードを貼り付け『スタイルシートの保存』ボタンを押すだけです。

CSSセレクタ {
  background: url(https://funmaker.jp/service/icon/free/アイコンコード/色サイズコード.png) no-repeat scroll 0 0;
}
アイコンコード
各アイコンの種類を指定するためのコード
下のアイコンコード一覧のアイコンを選択し、下に表示されるコードをコピーし貼り付ける。
色サイズコード
色  :orange、yellow、green、cyan、purple、pink、white、gray、black
サイズ:S、M、L
右図のように、全てのアイコンで色9種類、サイズ3種類が用意されているので、それぞれを選択し連続させ入力。『orange』の『L』サイズの色サイズコードは『orangeL』。

利用例

『各ページの見出し』[CSSセレクタ:.heading , .widget_home_page_widget h1]に飛行機のアイコン[アイコンコード:https://funmaker.jp/service/icon/free/symbol/plane_001]『cyan』の『L』サイズ[色サイズコード:cyanL]のアイコンを表示する際のコードは以下の通りです。

.heading , .widget_home_page_widget h1 {
background: url(https://funmaker.jp/service/icon/free/symbol/plane_001/cyanL.png) no-repeat scroll 0 0;
}

コードは全て半角英数字で入力するようご注意下さい。

色サイズコード | 初期費用無料ホームページ作成サイト - FunMaker
アイコン反映 操作 | 初期費用無料ホームページ作成サイト - FunMaker

アイコンコードの作成

アイコンのデザイン、サイズと色、反映箇所の3つを選択し、コードをコピーのボタンを押してください。
選択したアイコンのスタイルがコピーされます。
コピーされない場合はプレビューにあるコードをコピーしていただくようお願い致します。

デザインを選択

サイズと色を選択

反映箇所を選択

プレビュー

アイコンサンプル

CSSセレクタ {
  background: url(https://funmaker.jp/service/icon/free/アイコンコード/色サイズコード.png) no-repeat scroll 0 0;
}