habakiriの子テーマでウィジェットエリアを追加してページフッターに横並びメニューを表示するその２

habakirriの子テーマにウィジェットエリアを追加して、ページフッターにメニューを表示するようにできました。
こちらのページ参照

引き続き、メニューを横並び表示にしていきます。

①追加したフッターのclassにCSSを適用していきます。

style.css

/*右詰めにします*/
.footer-menu-area{
   text-align:right;
}
/*リストの上下に余白を取ります*/
.footer-menu-widget ul{
margin-top: 1em;
margin-bottom:1em;
}
/*リストを横並びにして、リスト同士の間隔を開けます*/
.footer-menu-widget li{
display:inline-block;
margin-left:1em;
}

/*ついでに、各リストの頭に矢印（＞）アイコンをつけちゃいます*/
.footer-menu-widget a::before{
 font-family: "FontAwesome";
 content: "\f138";
padding:4px 0;
margin-right:10px;

  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

以上。

habakiriテーマはfontawesomeを使用しているので、公式サイトにアクセスして、表示したいアイコンを選択すると、その詳細ページにアイコンを直接表示する方法（
■補足■
display:inline-block;　その要素をインラインブロック（横に並ぶブロック）になります。
a::before　aタグの直前にcontentの中にある文字などを追加できます。