読者です 読者をやめる 読者になる 読者になる

twitter-bootstrap-railsでBootstrapアイコンを使う

弱点のあるtwitter-bootstrap-rails

twitter-bootstrap-railsは一発でRails&Bootstrapが構築できる便利なものだがアイコンがデフォルトだと使えない

フォントの入手

面倒だが公式サイトからzipで落として fonts 以下を vendor/assets/fontsとしてコピー

あとはapp/assets/stylesheets/bootstrap_and_overrides.cssに以下を追記

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../assets/glyphicons-halflings-regular.eot");
  src: url("../assets/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../assets/glyphicons-halflings-regular.woff2") format("woff2"), url("../assets/glyphicons-halflings-regular.woff") format("woff"), url(     "../assets/glyphicons-halflings-regular.ttf") format("truetype"), url("../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
  1215
}

これで適当に

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> スター
</button>

とかするとちゃんとアイコンが表示されるはず