国別カテゴリーに国旗アイコンを表示する方法

概要説明

【作業の流れ】
①国旗アイコン（画像）を用意する
②画像を出来る限り圧縮する
③画像をファイル転送ソフトでサーバーにアップロードする
④CSSで画像を表示する

国旗の表示には画像を使っていますが、今のところサイト速度にはあまり影響はありません。
他のやり方でもできると思います。

①国旗アイコン（画像）を用意する

【国旗アイコンを配布しているサイト】
・Flags icons – Iconfinder.com
・flags icon packs – Free Icons
・Free Flag Icons | IconDrawer
・243 Country Flag Icons
・Flag Icons – IconArchive

国旗アイコンのファイル形式にはSVG、PSD、PNGなど色々ありますが、分からない人はPNG（.png）形式の画像ファイルを選ぶと良いと思います。

②画像を出来る限り圧縮する

TinyPNG

③画像をファイル転送ソフト（FTPクライアント）でサーバーにアップロードする

Download FileZilla Client for Windows (64bit)FTPソフト「FileZilla」の使い方【初心者向け】

④CSSで画像を表示する

カテゴリーリスト表示のclassを確認する

カテゴリーIDを確認する

CSSを編集する

/************************************
** 国旗アイコンの設定
************************************/
/*タイ*/
.cat-item-64 a::before{
 content:url(../../countries_icon/th.png)" ";
}

/*台湾*/
.cat-item-62 a::before{
 content:url(../../countries_icon/tw.png)" ";
}
/*日本*/
.cat-item-61 a::before{
 content:url(../../countries_icon/jp.png)" ";
}
/*韓国*/
.cat-item-63 a::before{
 content:url(../../countries_icon/kr.png)" ";
}
/*タイ*/
.cat-item-64 a::before{
 content:url(../../countries_icon/th.png)" ";
}
/*ベトナム*/
.cat-item-65 a::before{
 content:url(../../countries_icon/vn.png)" ";
}
/*マレーシア*/
.cat-item-66 a::before{
 content:url(../../countries_icon/my.png)" ";
}
/*フィリピン*/
.cat-item-67 a::before{
 content:url(../../countries_icon/ph.png)" ";
}