Flag Icon CSS 및 Font Awesome

3567 단어 RailsCSS

개시하다


사이트에 아이콘을 표시할 때 인터넷에서 아이콘 이미지를 수집하기 편리하도록 이름을 바꾸거나 크기를 조정해야 한다.
이번 소개는 국기를 쉽게 표시할 수 있는 Flag Icon CSS와 아이콘을 쉽게 표시할 수 있는 Font Awesome입니다.

Flag Icon CSS


먼저 국기를 쉽게 표시할 수 있는 Flag Icon CSS를 소개합니다.
flag-icon-css

Flag Icon CSS를 간단하게 테스트하기 위해 CDN를 통해 CSS를 읽습니다.
<html>
    <head>
        <meta charset="utf-8">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.9.0/css/flag-icon.css" rel="stylesheet">![スライド50.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3862/7e5f46c7-ab1b-4aa9-666e-1e893d6f4e61.jpeg)

        <style type="text/css">
            i {
                font-size: 400px;
            }

        </style>
    </head>
    <body style="background: #ccc;">
        <i class="flag-icon flag-icon-jp"></i>
        <i class="flag-icon flag-icon-us"></i>

        <hr />
        <i class="flag-icon flag-icon-jp flag-icon-squared"></i>
        <i class="flag-icon flag-icon-us flag-icon-squared"></i>

    </body>
</html>

예를 들어 일본 국기를 표시할 때는 다음과 같다.flag-icon- 이후 국가를 나타내는 두 개의 라틴 자모를 지정한다.flag-icon-squared를 사각형으로 지정합니다.
<i class="flag-icon flag-icon-jp"></i>

Rails의 경우


Rails에서 사용할 경우 다음 명령을 사용하여 라이브러리를 설치할 수 있습니다.
gem flag_icon_css_rails

Font Awesome


아이콘 글꼴을 표시하는 데 사용되는 Font Awesome에 대해 설명합니다.
Font Awesome

Rails에서 사용할 경우 다음 명령을 사용하여 라이브러리를 설치할 수 있습니다.
gem "font-awesome-rails"
font-awesome-rails application.css에서 CSS 파일을 지정합니다.
/*
 *= require font-awesome
 */
조수법으로 간단하게 기술할 수도 있다.
fa_icon "camera-retro"
# => <i class="fa fa-camera-retro"></i>

최후


마지막으로 위키피디아ISO 3166-1의 약자 일람표를 취합한 CSV를 기트허브 기스트에 공개했다.
arthur87/iso3166-1.csv
왼쪽부터 국가·지역을 뜻하는 일본어명, ISO3166-1의 영어명, 세 자릿수 국가코드, 라틴문자 3문자, 라틴문자 2문자, 장소, 행정구분이다.
ja_name
en_name
numeric
alpha3
alpha2
location
subdivision
아이슬란드
Iceland
352
ISL
IS
북유럽
ISO 3166-2:IS
온라인 시험 시스템 (function.php)
logstash grok 다중 일치

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage