htmlのリンクの前にgoogleのフォント（chevron_right）を置く方法は？

Question

私はhtmlでGoogleフォントを使用していますが、リンクの前にGoogleフォント（chevron_icon）を入れたいのですが、問題はそれがフロントの代わりにリンクの下に置かれていることです。ここに私のコードです。

<div class="mobile-navigation"> 
      <ul id = "mobile-nav" class="side-nav"> 
       <li> 
        <a href="#" onclick = "openList()"> Fashion </a> <i class="material-icons">chevron_right</i> 
        <ul id = "submenu1"> 
         <li><a href="#">Shirts</a></li> 
         <li><a href="#">Jackets</a></li> 
         <li><a href="#">Jeans</a></li> 
         <li><a href="#">T-Shirts</a></li> 
         <li><a href="#">Underwear</a></li> 

        </ul> 
       </li> 
       <li> 
        <a href="#">Electronics</a> 
       </li> 

      </ul> 
     </div> 

出力は次のようなものです。

ファイル

>

電子

私は次の出力をしたいです。

[ファイル]> [

電子

Answer 1

あなたは間違った場所に山形を配置する代わりに

<a href="#" onclick = "openList()"> Fashion <i class="material-icons">chevron_right</i></a> 

Answer 2

、あなたがそうのようにそれを配置する必要があり、これを試してみてください：

<a href="#" onclick = "openList()"> Fashion <i class="material-icons">&#62; (chevron_right)</i></a> 

ここには働くことがあります：https://jsfiddle.net/vtkLy29r/1/