はてなブログスマホ版のトグルメニュー冒頭に Font Awesome のアイコンフォントを表示

menu-fontawesome.html

<!--メニューバー-->
<div id="menu">
    <div id="btnArea">
        <span id="menuBtn"><i class="blogicon-reorder lg"></i> MENU</span>
    </div>
    <ul id="menuContent">
        <li><a href='リンク URL'><Font Awesome の <i class から始まるコードを貼り付ける>メニュー名</a></li>
        <li><a href='リンク URL'><Font Awesome の <i class から始まるコードを貼り付ける>メニュー名</a></li>
        <li><a href='リンク URL'><Font Awesome の <i class から始まるコードを貼り付ける>メニュー名</a></li>
        <li><a href='リンク URL'><Font Awesome の <i class から始まるコードを貼り付ける>メニュー名</a></li>
        <li><a href='リンク URL'><Font Awesome の <i class から始まるコードを貼り付ける>メニュー名</a></li>
    </ul>
</div>
 
<style type="text/css">
#top-editarea .section{
    margin: 0;
    width: 100%;
}
#menu{background: #ECEEF1;/*メニューバーの背景*/}
#btnArea{text-align: right;/*MENUの文字の位置*/}
#menuBtn{
    display: inline-block;
    padding: 8px;
    margin: 5px;
    border-radius: 5px;
    background: #444;/*MENUの背景色*/
    color: #fff;/*MENUの文字色*/
    font-size: 80%;
}
#menu > ul{
    display: none;
    padding: 0;
    margin: 0;
}
#menuContent > li{
    list-style-type: none;
    margin: 0 auto;
}
#menuContent > li > a{
    display: block;
    padding: 7px;
    text-align: center;/*リストの文字の位置*/
    background: #444;/*リストの背景色*/
    color: #fff;/*リストの文字色*/
    font-size: 80%;
    font-weight: bold;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menuBtn"),
        menuContent = $("#menuContent");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
});
</script>