<ons-tab>内でのi18nextを使ってのlabelタグの翻訳方法を教えて頂きたいです。

Question

前提・実現したいこと

ど素人で申し訳ありません。
Monaca ONSEN UI2.0にて簡単なレシピアプリを作っています。
こちらのサイトの皆さんの質問&回答などを参考にタブ&ナビゲーションを実装し、
i18nextにて翻訳できる様にしたんですが、他の箇所は翻訳も問題なく出来ているんですが、
<ons-tabbar>の<ons-tab>でアイコンの下に表示される文字部分(label)の翻訳方法が分かりません。
他の箇所では正常に翻訳出来ている様ですのでjsファイル及びjsonファイルは問題なく書けていると思うのですが...
どうぞよろしくお願い申し上げます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

 <ons-tabbar swipeable position="bottom">
        <ons-tab label="巻寿司" icon="stop-circle"  page="tab1.html" active="true" >
            </ons-tab>
        
        <ons-tab label="握り寿司" icon="square-o" page="tab2.html">
            </ons-tab>
            <ons-tab label="data-i18n="tab.recipe"" icon="book" page="page1.html">
           <!--↑のdata-i18n="tab.recipe"の箇所です。日本語環境では「レシピ」、英語環境では「Recipe」となる様にjsonファイルに記述済みなんですが、「label」に対しての代入の仕方が分かりません。-->
          
            </ons-tab>
          
    </ons-tabbar>

試したこと

無い知識で散々いろいろ試してみましたが、アイコンと文字が横にずれてしまったり中々上手く行きませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
。

Answer 1

書き方を間違えていると思われます。
↓のように書き直してみてはいかがでしょうか？

<ons-tab data-i18n="[label]tab.recipe" icon="book" page="page1.html">

https://codepen.io/puku0x/pen/JLLbey

Comments

[Suhina]

出来ました！ありがとうございました。
Codepenでの記述もわざわざありがとうございました。
この部分がどうしても分からなかったのでCSSで強引に対応していたんですが、スッキリ致しました。
とても勉強になりました。
また宜しくお願い致します！