inputを使ったドロワーメニューに上下に動くようなfont awesomnoの矢印を付ける

現在、inputタグを使いドロワーメニューを作りました。MENUという文字の隣にドロワーが開いているときは上向き、閉まっているときは

<div id="drwr">
    <label for="Panel1"><p>MENU</p></label>
    <input type="checkbox" id="Panel1" class="on-off" />
    <ul id="menu_drwr">
      <li class="top"><a href="#top">TOP</a></li>
      <li class="mimamori"><a href="#mimamori">みまもりナビ<br>とは</a></li>
      <li class="func"><a href="#func">機能・特徴</a></li>
      <li class="impl"><a href="#impl">導入事例</a></li>
      <li class="inst"><a href="#inst">設置手順</a></li>
      <li class="price"><a href="#price">価格<br>購入方法</a></li>
      <li class="log_in"><a href="#log_in">ログイン<br>会員登録</a></li>
    </ul>
  </div>

#drwr {
  position: fixed;
  z-index: 999;
  display: block;
  width: 100%;
}
label{
    background: #E8648C;
    height: 45px;
    width: 100%;
    color: #fff;
    padding: 10px;
    display: block;
    margin: 0;
}
label p:before {
  content: "\f13a";
  font-family: FontAwesome;
  padding-right:5px;
  font-size: 25px;
}

label:hover {
  background-color: #EF7D9F;
}

input[type="checkbox"].on-off{
    display: none;
}

#drwr #menu_drwr {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu_drwr li {
    padding: 5px;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: 100vh;
    background-color: #F4E5E4;
}