flag_icon_cssを使って、railsに国旗を表示させる

fontawesomeに国旗がないぞorz

fontawesomeで、国旗のフォントを探してみると....

ない...ないのか...

他に使えそうなものないかなと調べてみると、
flag_icon_css_railsなるものが！！

使い方は、README.mdにあるとおりですが、一応記録に残しておきます。

①'flag_icon_css_rails'のインストール

gemfile

gem 'flag_icon_css_rails'

bundle install

rails g flag_icon_css_rails

②requireします

application.scssに@import 'flag-icon';を追記する。

app/assets/stylesheets/application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import 'bootstrap';
@import 'custom';
#追記
@import 'flag-icon';

③ viewに記述する

あとは、表示したい箇所にspanタグで表示するだけ！

#〇〇はその国の略号が入ります。(日本→jp)
<span class="flag-icon flag-icon-○○"></span>

略号がリスト化されているもの、一応載せておきます。
ISO 3166-1

自分は日本の国旗を使用しました。

<span class="flag-icon flag-icon-jp"></span>

④ 大きさを変える

大きさは、font-sizeで変更できます。
ちなみに自分は、背景色が白のviewで使いたかったので、borderを使いましたが、この辺は用途に合わせて使っていきたいですね。

span {
      font-size: 100px;
      border: solid 1px  black;
      }

以上で完了です。

Flag Icon CSSとFont Awesome