Bootstrapのテンプレートにアイコンフォントを入れる
IcoMoonで作ったアイコンフォント（以下：アイコン）をBootsrtapの無料テンプレートに入れて使う方法です。
ご自分で１から作ったサイトでもこれを見ればアイコンのフォルダ設置の仕方が分かると思います◎
BootstrapブートストラップはTwitter社が開発したウエブサイトやwebアプリケーションが作れるテンプレートが用意されたフリーソフトです
Bootstrapテンプレートを活用すれば早くて簡単
無料でダウンロードできるStart Bootstrap のテンプレートを使います。
下の方に行くと出てくるCreativeを使わせてもらおうと思うのでクリックします。
ファイルをダウンロードします
Free Download をクリックします。
圧縮されているので解凍します。
ファイル一式入っているのが分かります。index.htmlファイルをクリックするとサイトが表示されます。
少しスクロールした所、Servicesに表示されている Font Awesome の4つのアイコンをIcoMoonのアイコンに変更します。
IcoMoonのファイルを入れる
IcoMoonで作ったファイルの中で使うのはAのfontsフォルダ（とその中の4つのファイル）とBのstyle.cssファイルです。
IcoMoonのフォルダの中のA: fontsフォルダをコピーします。（コピーでなくこれをそのまま移動して使っても勿論OKです）
それを先程ダウンロードしたstartbootsrtap〜のフォルダのCSSの中にペーストします。
位置関係が大事です
ペーストした後はこの位置関係になります。
ここが変わるとリンクが切れてちゃんと表示されないので注意してください。index.htmlに書かれているリンクを自分で書き換えるのであればこの位置でなくても大丈夫です。書き換えないならこの位置、書き換えるなら自分の好きな位置という事です◎
style.cssの入れ方1：Bootstrapのstyle.cssに続けて書く（コピペする）
続いてB: style.cssを入れます。IcoMoonのstyle.cssをテキストエディタ（ここではフリーソフトのVSCodeビジュアルスタジオコードを使っています）で開きます。
Macなら「テキストエディット」、Windowsなら「メモ帳」と言う標準で入っているテキストエディタがありますのでそれでも同様の事が出来ます。機能が少ないので使いにくいだけで。
開いた中身を全部コピーします。
startbootstrap~のフォルダの中のCSSの中のstyle.cssを同じくテキストエディタで開いて、、
ちょっと長いですが一番下まで行き、先程コピーしたものをペーストし保存します。
ペースト後はこんな感じです。
この方法もあります↓
style.cssの入れ方2：CSSの名前を変えて、htmlに新しくリンクを書く
icomoonのstyle.cssの中身をコピペするのではなく、bootstrapのフォルダにファイルごと入れます。
でも、bootstrapのフォルダには既にstyle.cssと言う名前のファイルがあるよね？
なので名前が重複しないよう”icomoon.css”など書き換えて入れるのがポイントです◎
この場合もう１つやることがあります。リンクの追加です。bootstrapのindex.htmlを開き19行目、
styles.cssへのパスをコピーして先程書き換えた名前、icomoon.cssに書き換えます。これで準備OKです。
ちなみにicomoonからのfontsフォルダをcssフォルダの中ではなくこの位置に置いた場合、icomoon.cssファイルの３、４、５、６、７行のパスは「fonts」の前に「../」を書かないとパスが通らずこの後htmlにアイコンを記述しても正しく表示されません。
フォルダの位置、ファイルの位置によってパスの修正をしないといけない事もあるので正しく表示されない時は疑ってみてください◎
テンプレートのHTMLに記述します
この4つのアイコンを書き換えますので
index.htmlファイルをテキストエディタで開きます。72行目（開く環境によっては72行目では無いかもしれません）が１番左のダイアモンドのアイコン＋テキストの塊です。
IcoMoonのGet Codeで差し替えたいアイコンのクラス名(ここではicon-d3)をコピーして
fas fa-4x fa-gem を消してペーストします。
表示されました。でも小さすぎるので大きく表示するようCSSファイルに指示を書きます。
CSSに大きさの指示を書く
先程IcoMoonのデータを貼り付けたstyle.cssファイルの目的のアイコンにfont-size: 5.5em;を追記して保存。表示が大きくなりました。
色、背景色、枠線、間隔など他にも色々指定して装飾する事が出来ます
１は済んだので同じ作業で２３４とアイコンを追加します。
テキスト部分も自分のサイト用に変更します。ある程度出来上がったテンプレートはちょこちょことアレンジして使えるので時間短縮にもなり便利です。
以下の記事はアイコンではないので蛇足的な説明です。
画像を入れ替える簡単な方法
もともと画像が入っていた場所に同じ名前で入れ替える。これが１番簡単でです。
htmlのファイルを書き換えなくてもいいからだね
1番上のヘッダー画像ならstartbootstrap〜＞assets＞img＞bg-masthead.jpg を差し替える事になるので、大きさも今と同じ1900×1267pxにして保存もこの位置にします。
新しい画像を1900×1267pxで制作。
同じ場所を選んで名前もそのままで「保存」
当然置き換えますか？と聞かれるので置き換えます。
置き換わりました。でもかなり上に色が乗っているので薄くしてもう少し写真を見せようと思います。
style.cssファイルの10099行目の0.8を両方とも0.4に変更します。
上の文字がしっかり見えつつ背景の画像も見えるようになったので良しとします◎
下の6つの画像ならstartbootstrap〜＞assets＞img＞portfolio＞fullsizeと＞thumbnailsの中にあります。こちらもサンプルと同じ650×350pxにして保存します。（、、このサンプルサイト、fullsizeもthumbnailsも同じ大きさになってますね）
2021年10月14日 追記
ヘッダー、メイン部分、フッターなどパーツの組み合わせで（0からコードを書くよりずっと）簡単に作れるサービス、Aperitifアペリティフの使い方とその後のhtml、cssファイルの見方、編集方法を書きました。
こちらでもIcoMoonのファイルの設置方法、使い方、解説しています。
最後に。上↑の四角のアイコンフォントをこの色（水色、背景黄色）にしたためもっと上の方の四角も同じ色になってしまいました。
本当は他の四角に合わせて黒１色にしたい所です。なのでこの場合１つのアイコンに対して２種類のクラス名を作ってそれぞれに対して色の指定をするのが正解です。その方法をこちらで解説しています◎
htmlファイルには書かず、cssの疑似要素でアイコンフォントを表示する方法もあります◎
