Luxeritasのモバイル用ナビカスタマイズ、3.xへの対応
「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%');
- .text(") ←消す
- .removeClass('fas fa-angle-double-right’) ←加える
- fa fa-home ←緑の部分 fa を消す
とりあえずこれでいけます。
やっていること(解説)
1.えっと、すいません。なんで .text(“") で消していたのか覚えていません。Luxeritas 2.x では<i></i>の間に何か入っていたんだと思いますw 今は不要になったので消しています。
2.ルクセリタス 3.xではメニューアイコンが <i class="~"></i> 形式で記載されているので、class="fa fas fa-angle-double-right" のうち、[fas fa-angle-double-right]を削り、代わりに自分で入れたいアイコンを入れています(fesについては後述。バージョン5に対応させたいなら、FAのサイトで調べて入れ替えます)。
3.もともとの接頭辞 fa を消さずに残しているので、あらためて fa を代入する必要がないため、fa は不要になっています。
5つのモバイルナビアイコンの変更
「これだけじゃ他のが分からん」と言われそうなので、モバイルナビのメニューとして使われているアイコン5つのの入れ替え方を書いておきます。
- fa fas fa-list(Menu)
- fa fas fa-exchange(Sidebar)
- fa fas fa-angle-double-left(<<privious)
- fa fas fa-angle-double-right(>>next)
- 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 が加わえられています。
- fa fas fa-list(Menu)
- fa fas fa-exchange(Sidebar)
- fa fas fa-angle-double-left(<<privious)
- fa fas fa-angle-double-right(>>next)
- fa fas fa-search(Search)
従来のFont Awesome では、全てのアイコンの接頭辞(プレフィックス)は “fa" でした。
しかしバージョン5では仕様が一部変更され、アイコンのカテゴリーごとに異なる接頭辞が割り当てられています。fas はその接頭辞の一つ。
Luxeritas 3.x では、おそらくバージョン5への対応をしたのだろうと思います。
5月28日の Luxeritas 3.0.3 でFont Awesome5 が使えるようになりました。4を使い続けるならオプションで設定してください。デフォルトで5なので、ここで5に対応させていたらそのままでOK。5にするなら fa を消しても大丈夫。
fa と fas の二つが接頭辞に使われているのは、従来の Font Awesome とバージョン5の両方に対応するため。
モバイルナビのアイコンを Font Awesome 5 に対応させるには?
使っているアイコンがバージョン4と5が同じ名前ものなら何もしなくても両方に対応しています。
ただ、名前そのものが変更されたものや、エイリアス(同じアイコンなのに別名のものもある)は廃止されているので、そのあたりは注意が必要です。
- いくつかの名前は変更され、より整合性がとられています
- バージョン5ではエイリアス(同じアイコンに複数の名前がついていた)がなくなりました。各アイコンは正式な名前を1つだけ持ちます
- すべてのブランドアイコンには接頭辞 fab がつきます
- -o で終わっていたアウトラインスタイルを持つアイコンは、接頭辞 far に変更されました
Font Awesome ギャラリーでアイコンの名前が確認できます。
ディスカッション
コメント一覧
まだ、コメントがありません