Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

vinaka
24歳/都内のWeb系自社開発企業でサービスつくってます Type script学習中 温泉卵を生成したい
https://github.com/vinaka-log
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away