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

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

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

該当のソースコード

html
1<nav id="site-navigation" class="main-navigation">
2					<button class="drawer-toggle drawer-hamburger">
3						<span class="screen-reader-text">メニュー</span>
4						<span class="drawer-hamburger-icon"></span>
5					</button>
6					<div class="drawer-nav">
7						<div class="drawer-content">
8							<div class="drawer-content-inner">
9							<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>
10<ul class="sub-menu">
11	<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>
12</ul>
13</li>
14<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>
15<ul class="sub-menu">
16	<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>
17	<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>
18</ul>
19</li>
20<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>
21<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>
22</ul></div>														<form role="search" method="get" class="search-form" action="http://demo.themegraphy.com/write-ja/">
23				<label>
24					<span class="screen-reader-text">検索:</span>
25					<input type="search" class="search-field" placeholder="検索 &hellip;" value="" name="s" />
26				</label>
27				<input type="submit" class="search-submit" value="検索" />
28			</form>														</div><!-- .drawer-content-inner -->
29						</div><!-- .drawer-content -->
30					</div><!-- .drawer-nav -->
31				</nav><!-- #site-navigation -->

試したこと

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

html
1<nav class="navbar">
2      <ul class="main-menu">
3        <li>ホーム <i class="fas fa-angle-down"></i></li>
4          <ul class="sub-menu">
5            <li>→カスタマイズ</li>
6          </ul>
7        <li>ページ<i class="fas fa-angle-down"></i></li>
8          <ul class="sub-menu">
9            <li>アイキャッチ画像無しのページ</li>
10            <li>ページ（全幅テンプレート）</li>
11          </ul>
12        <li>タイポグラフィー</li>
13        <li>お問い合わせ</li>
14        <li><i class="fas fa-search"></i></li>
15      </ul>
16    </nav>

行動規範の内容に同意します

回答2件

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

css
1      .menu-link::after {
2        content: '';
3        display: inline-block;
4        vertical-align: 30%;
5        width: 5px;
6        height: 5px;
7        margin: 0 0 0 15px;
8        border-right: 1px solid $title-color;
9        border-bottom: 1px solid $title-color;
10        transform: rotate(45deg);
11      }