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

Share on Facebook
Pocket
LINEで送る
Bookmark this on Google Bookmarks

使いたかったので。

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

brew update
brew install node
npm install -g grunt-cli
brew install ruby
gem install bundle

 

作業ディレクトリを作成

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

cd ~
mkdir bootstrap4
cd bootstrap4

 

Bootstrap4本体をダウンロード

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

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

 

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

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 

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

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

 

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

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

 

使い方

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

Follow me!

Bootstrap4にglyphicon・FontAwesome・octiconsをコンパイルして入れる方法” に対して 2 件のコメントがあります

  1. BBfriend より:

    参考になりました。ありがとうございます

    https://www.blog.umentu.work/wp-content/themes/lightning/design_skin/origin/css/style.css?ver=3.1.0

    .syntaxhighlighter .container:before, .syntaxhighlighter .container:after {
    display: block;
    }
    を追加すると、1行ずれが治りますよ..
    ttps://cmsimpleforum.com/viewtopic.php?f=12&t=9054&start=10#p49584

    1. umentu_blog より:

      ありがとうございます。修正させていただきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です