Luxeritasのモバイル用ナビカスタマイズ、3.xへの対応

2018年5月23日2018年5月30日Luxeritas

「jQuery でのモバイルナビ（豪華メニュー）カスタマイズ」の Luxeritas 3.x への対応です。

以前↓こんなんを紹介していましたが、テキスト部分はそのまま使えているのに、フォントアイコンがオリジナルになっていると思います。

 <script>jQuery(function($){
$('#gnavi ul.mobile-nav li.mob-next').removeClass("mob-next").addClass("mob-home").css({'cursor':'pointer','opacity':'1'});
//変更するとこ→$('#gnavi ul.mobile-nav li.mob-home i').text('').addClass('fa fa-home').css('font-size','160%');
$('#gnavi ul.mobile-nav li.mob-home p').text('Home');
$('.mob-home').on('click', function() {
window.location.href = 'https://yaruzou.net';
});
});</script>

こんなんなっちゃった理由は Font Awesome アイコンフォントの挿入の仕方が変わったため。

フォントアイコンを入れているコードの一文を変更すれば直ります（※注）。

変更方法

アイコン部分だけがおかしいので、変更するのは Font Awesome を挿入している部分だけ。

$('#gnavi ul.mobile-nav li.mob-home i').text('').addClass('fa fa-home').css('font-size','160%');

↓↓↓

$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-angle-double-right').addClass('fa-home').css('font-size','160%');

1. .text(")　←消す
2. .removeClass('fas fa-angle-double-right’)　←加える
3. fa fa-home　←緑の部分 fa を消す

とりあえずこれでいけます。

やっていること（解説）

１．えっと、すいません。なんで .text(“") で消していたのか覚えていません。Luxeritas 2.x では<i></i>の間に何か入っていたんだと思いますｗ　今は不要になったので消しています。

２．ルクセリタス 3.ｘではメニューアイコンが <i class="～"></i> 形式で記載されているので、class="fa fas fa-angle-double-right" のうち、[fas fa-angle-double-right]を削り、代わりに自分で入れたいアイコンを入れています（fesについては後述。バージョン５に対応させたいなら、FAのサイトで調べて入れ替えます）。

３．もともとの接頭辞 fa を消さずに残しているので、あらためて fa を代入する必要がないため、fa は不要になっています。

５つのモバイルナビアイコンの変更

「これだけじゃ他のが分からん」と言われそうなので、モバイルナビのメニューとして使われているアイコン５つのの入れ替え方を書いておきます。

1. fa fas fa-list（Menu）
2. fa fas fa-exchange（Sidebar）
3. fa fas fa-angle-double-left（<<privious）
4. fa fas fa-angle-double-right（>>next）
5. fa fas fa-search（Search）

Menu
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-list').addClass('フォントアイコン名').css('font-size','160%');

Sidebar
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-exchange').addClass('フォントアイコン名').css('font-size','160%');

Privious
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-angle-double-left').addClass('フォントアイコン名').css('font-size','160%');

Next
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fa-angle-double-right').addClass('フォントアイコン名').css('font-size','160%');

Search
$('#gnavi ul.mobile-nav li.mob-home i').removeClass('fas fa-search').addClass('fa-home').css('font-size','160%');

Font Awesome 5 への対応（※注）

モバイルナビ豪華版のアイコンで使われているクラスを見ると、fa の後ろに fas が加わえられています。

1. fa fas fa-list（Menu）
2. fa fas fa-exchange（Sidebar）
3. fa fas fa-angle-double-left（<<privious）
4. fa fas fa-angle-double-right（>>next）
5. fa fas fa-search（Search）

従来のFont Awesome では、全てのアイコンの接頭辞（プレフィックス）は “fa" でした。

しかしバージョン５では仕様が一部変更され、アイコンのカテゴリーごとに異なる接頭辞が割り当てられています。fas はその接頭辞の一つ。

Luxeritas 3.x では、おそらくバージョン５への対応をしたのだろうと思います。

fa と fas の二つが接頭辞に使われているのは、従来の Font Awesome とバージョン５の両方に対応するため。

モバイルナビのアイコンを Font Awesome 5 に対応させるには？

使っているアイコンがバージョン４と５が同じ名前ものなら何もしなくても両方に対応しています。

ただ、名前そのものが変更されたものや、エイリアス（同じアイコンなのに別名のものもある）は廃止されているので、そのあたりは注意が必要です。

• いくつかの名前は変更され、より整合性がとられています
• バージョン5ではエイリアス（同じアイコンに複数の名前がついていた）がなくなりました。各アイコンは正式な名前を1つだけ持ちます
• すべてのブランドアイコンには接頭辞 fab がつきます
• -o で終わっていたアウトラインスタイルを持つアイコンは、接頭辞 far に変更されました

How to Use | Font Awesome

Font Awesome ギャラリーでアイコンの名前が確認できます。