プラグイン開発でFont Awesomeを使う方法

kintone カスタマイズ
1

お世話になっております。

javascript初心者ではありますが、試行錯誤しながらプラグインの開発を行っており、現在、プラグイン実行時に一覧画面に作成するボタンに

Font Awesome(http://fontawesome.io/ )を利用して「fa-file-o」(http://fontawesome.io/icon/file-o/ )のアイコンをセットしたいと考えています。

 

Font Awesomeの利用方法として、

1.データファイルをダウンロードし、自分でサーバーに設置する方法

2.<head>にCDNのリンクを記述する方法

があるかと思いますが、こちらのサイト(http://www.bokuichi.net/itweb/html/font-awasome.php#a2)を参考に両方試してみたものの、 どちらも上手くアイコンを表示させることが出来ません。

どの様にしたらアイコンを表示できるかご教授頂きたいです。

 

今までの試みと結果は以下です。

var button = $(‘<input type=“button” id=“button” title=“ファイルを作成”><i class=“fa fa-file-o” aria-hidden=“true”></i></input>’);

var menu = kintone.app.getHeaderMenuSpaceElement();
$(menu).append(button);

でまずボタンを作成し、

 

1の場合、「kintone プラグイン開発手順」(https://cybozudev.zendesk.com/hc/ja/articles/203455680 )を参考に作成したフォルダ構成の中の

「css」に”font-awesome.min.css”を配置、「css」と同じ階層に「fonts」フォルダとその中のファイルを追加し、

manifestファイルのdesktopのcss項目に"css/font-awesome.min.css”を追加しました。

実行したところ、Failed to load resource: the server responded with a status of 404 (Not Found)のエラーが発生しました。

2の場合、JavaScript(jQuery)で

<link href=“http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=“stylesheet”>
をheadにappendしましたが、cssが適応されませんでした。

 

何卒宜しくお願い致します。

 

 

 

2

marronさん
cstapの瀧ヶ平です

2.の場合は参照しているCSSのURLがhttpであることが原因ではないでしょうか？
kintoneではhttpsのURLのリソースのみ利用できるので、httpの部分をhttpsに直せばロードできるのではないでしょうか？

3

瀧ヶ平さん

ご指摘頂いたhttpをhttpsに書き換えたところ、アイコンを表示することが出来ました。

ただ、ボタンの中ではなく横に表示されてしまい、

var button = $(‘<input type=“button” id=“button” title=“ファイルを作成”><i class=“fa fa-file-o” aria-hidden=“true”></i></input>’);

を

var csvButton = $(‘<button id=“csv_button” title=“CSVファイルを作成”><i class=“fa fa-file-o” aria-hidden=“true”></i></button>’);

にしたところ、ボタンの中にアイコンを表示することができました。

 

無事問題を解決することが出来ました。

この度はどうもありがとうございました。