Bootstrap4にglyphicon・FontAwesome・octiconsをコンパイルして入れる方法

使いたかったので。

[amazonjs asin="4877833609″ locale="JP" title="Bootstrapファーストガイド―CSS設計の手間を大幅に削減!"]

必要なパッケージをインストール

[shell]
brew update
brew install node
npm install -g grunt-cli
brew install ruby
gem install bundle
[/shell]
 

作業ディレクトリを作成

ホームディレクトリ/bootstrap4 で作業する。

[shell]
cd ~
mkdir bootstrap4
cd bootstrap4
[/shell]

 

Bootstrap4本体をダウンロード

bootstrap4本体をダウンロードしてnpm install。

[shell]
wget https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.2.zip
unzip v4.0.0-alpha.2.zip
cd bootstrap-4.0.0-alpha.2/
mkdir fonts
npm install
[/shell]

 

Font-Awesomeをダウンロードして追加

[shell]
cd ../
wget https://github.com/FortAwesome/Font-Awesome/archive/master.zip
unzip master.zip
rm master.zip
mkdir -p bootstrap-4.0.0-alpha.2/font-awesome/scss
cp Font-Awesome-master/scss/* bootstrap-4.0.0-alpha.2/font-awesome/scss/
cp Font-Awesome-master/fonts/* bootstrap-4.0.0-alpha.2/fonts/
echo " >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
echo '$fa-font-path: "../fonts";’ >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
echo '@import "../font-awesome/scss/font-awesome.scss";’ >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
cd bootstrap-4.0.0-alpha.2/
grunt dist
[/shell]

octicons をダウンロードして追加

[shell]
cd ../
wget https://github.com/github/octicons/archive/master.zip
unzip master.zip
rm master.zip
mkdir -p bootstrap-4.0.0-alpha.2/octicons/scss
cp octicons-master/octicons/* bootstrap-4.0.0-alpha.2/octicons/scss/
cp octicons-master/octicons/*.ttf bootstrap-4.0.0-alpha.2/fonts/
echo " >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
echo '@import "../octicons/scss/octicons.scss";’ >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
cd bootstrap-4.0.0-alpha.2/
grunt dist
[/shell]

 

glyphiconsをダウンロードして追加

[shell]
cd ../
wget https://github.com/twbs/bootstrap-sass/archive/master.zip
unzip master.zip
rm *.zip
cp bootstrap-sass-master/assets/fonts/bootstrap/* bootstrap-4.0.0-alpha.2/fonts/
cp bootstrap-sass-master/assets/stylesheets/bootstrap/_glyphicons.scss bootstrap-4.0.0-alpha.2/scss/
echo " >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
echo '$bootstrap-sass-asset-helper: false;’ >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
echo '$icon-font-name: 'glyphicons-halflings-regular’;’ >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
echo '$icon-font-svg-id: 'glyphicons_halflingsregular’;’ >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
echo '$icon-font-path: '../fonts/’;’ >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
echo '@import "glyphicons";’ >> bootstrap-4.0.0-alpha.2/scss/bootstrap.scss
cd bootstrap-4.0.0-alpha.2/
grunt dist
cp -r fonts/ dist/fonts
[/shell]

 

使い方

dist の中にある js css fonts ディレクトリを読み込んで使う。