画像のナビゲーションバーにある下向き矢印を表示したい

Question

画像のナビゲーションバーにある下向き矢印を表示したい

WordPressのWriteというテーマの模写コーディングをしているのですが、
ナビゲーションバーの「ホーム」と「ページ」の右にある下向き矢印が
どうやって表示されているのか知りたいです。
現時点ではHTMLとCSSのみを学んでいる所なのですが、
ソースをみてもどの部分でその矢印を表示させているかわかりません。

http://demo.themegraphy.com/write-ja/

該当のソースコード

<nav id="site-navigation" class="main-navigation">
					<button class="drawer-toggle drawer-hamburger">
						<span class="screen-reader-text">メニュー</span>
						<span class="drawer-hamburger-icon"></span>
					</button>
					<div class="drawer-nav">
						<div class="drawer-content">
							<div class="drawer-content-inner">
							<div class="menu-demo-container"><ul id="menu-demo" class="menu"><li id="menu-item-2218" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-2218"><a href="http://demo.themegraphy.com/write-ja/">ホーム</a>
<ul class="sub-menu">
	<li id="menu-item-2221" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2221"><a href="http://demo.themegraphy.com/write-ja/wp-admin/customize.php">→カスタマイズ</a></li>
</ul>
</li>
<li id="menu-item-2337" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2337"><a href="http://demo.themegraphy.com/write-ja/page/">ページ</a>
<ul class="sub-menu">
	<li id="menu-item-2317" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2317"><a href="http://demo.themegraphy.com/write-ja/page/page-without-featured-image/">アイキャッチ画像無しのページ</a></li>
	<li id="menu-item-2316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2316"><a href="http://demo.themegraphy.com/write-ja/page/page-fullwidth-template/">ページ (全幅テンプレート)</a></li>
</ul>
</li>
<li id="menu-item-2336" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2336"><a href="http://demo.themegraphy.com/write-ja/typography/">タイポグラフィー</a></li>
<li id="menu-item-2335" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2335"><a href="http://demo.themegraphy.com/write-ja/contact/">お問い合わせ</a></li>
</ul></div>														<form role="search" method="get" class="search-form" action="http://demo.themegraphy.com/write-ja/">
				<label>
					<span class="screen-reader-text">検索:</span>
					<input type="search" class="search-field" placeholder="検索 &hellip;" value="" name="s" />
				</label>
				<input type="submit" class="search-submit" value="検索" />
			</form>														</div><!-- .drawer-content-inner -->
						</div><!-- .drawer-content -->
					</div><!-- .drawer-nav -->
				</nav><!-- #site-navigation -->

試したこと

FontAwsomeのangle-downを入れてみましたが、
同じ見た目にはなりませんでした。

<nav class="navbar">
      <ul class="main-menu">
        <li>ホーム <i class="fas fa-angle-down"></i></li>
          <ul class="sub-menu">
            <li>→カスタマイズ</li>
          </ul>
        <li>ページ<i class="fas fa-angle-down"></i></li>
          <ul class="sub-menu">
            <li>アイキャッチ画像無しのページ</li>
            <li>ページ（全幅テンプレート）</li>
          </ul>
        <li>タイポグラフィー</li>
        <li>お問い合わせ</li>
        <li><i class="fas fa-search"></i></li>
      </ul>
    </nav>

Answer 1

擬似要素::afterのボーダーを設定して回転させる方法で同じ表示ができました！

      .menu-link::after {
        content: '';
        display: inline-block;
        vertical-align: 30%;
        width: 5px;
        height: 5px;
        margin: 0 0 0 15px;
        border-right: 1px solid $title-color;
        border-bottom: 1px solid $title-color;
        transform: rotate(45deg);
      }

Answer 2

たぶんこれでは。

【無料で使えるフラットアイコンフォント「Genericons」 | Web’Notes】
http://webnonotes.com/design/genericons/

【Genericons Neue】
http://genericons.com/

Comments

[lioheart9]

回答いただきありがとうございます！
上のリンクにあるCSSに記述するやり方なのでしょうか。
やってみます。ありがとうございます。