Bootstrapのテンプレートにwebアイコンフォントを入れる

IcoMoonで作ったWebアイコンフォント（以下：アイコン）をBootsrtapの無料テンプレートに入れて使う方法です。

ご自分で１から作ったサイトでもこれを見ればアイコンのフォルダ設置の仕方が分かると思います◎

 

 

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の中にペーストします。

 

 

位置関係が大事です

ペーストした後はこの位置関係になります。

ここが変わるとリンクが切れてちゃんと表示されないので注意してください

 

 

続いてB: style.cssを入れます。IcoMoonのstyle.cssをテキストエディタで開きます。

 

開いた中身を全部コピーします。

 

startbootstrap~のフォルダの中のCSSの中のstyle.cssを同じくテキストエディタで開いて、、

 

ちょっと長いですが一番下まで行き、先程コピーしたものをペーストし保存します。

 

ペースト後はこんな感じです。

これでファイルの準備は済みました。

 

 

テンプレートのHTMLに記述します

 

この4つのアイコンを書き換えますので

 

index.htmlファイルをテキストエディタで開きます。72行目が１番左のダイアモンドのアイコン＋テキストの塊です。

 

IcoMoonのGet Codeで差し替えたいアイコンのクラス名(ここではicon-d3)をコピーして

 

fas fa-4x fa-gem を消してペーストします。

 

表示されました。でも小さすぎるので大きさをCSSファイルに追記します。

 

 

CSSに追記します

 

先程IcoMoonのデータを貼り付けたstyle.cssファイルの目的のアイコンにfont-size: 5.5em;を追記して大きくなりました。

色、背景色、枠線、間隔など他にも色々指定して装飾する事が出来ます

 

 

１は済んだので同じ作業で２３４とアイコンを追加します。

 

 

テキスト部分も自分のサイト用に変更します。テンプレートはちょこちょことアレンジして使えるので便利です。

 

 

以下の記事はアイコンではないので蛇足的な説明です。

 

画像を入れ替える簡単な方法

もともと画像が入っていた場所に同じ名前で入れ替える。これが１番簡単です。

 

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も同じ大きさになってますね）