FontAwesomeフィルタ

これはJulian(Moodleman)Riddenによって書かれたMoodle用の貢献(第三者)フィルタです。Moodle.orgで共有されています。

Font Awesomeは、サイズ、色、ドロップシャドウ、そしてCSSの力でできることなら何でもカスタマイズできるスケーラブルなベクターアイコンをサイトに提供します。 Font Awesomeは完全にオープンソースで、GPL互換です。プロジェクトでは評価されていると言われていますが、フォントを使用する際に属性は必要ありません。

このフィルタにより、FontAwesome対応のmoodleサイトのコースコンテンツにFontAwesomeアイコンを簡単に追加できます。 moodle.orgのGeneral Pluginsフォーラムでこのフィルタに関する質問とGitHub Issue Trackerへのバグを必ずターゲットにしてください。

目的のフィルター

このフィルタの目的は、コンテンツ制作者がコースコンテンツのどこにでもFontAwesomeアイコンを簡単に追加できるようにするための簡単で機能的な方法を提供することでした。 FontAwesomeが提供するカスタムクラスの作成を含む推奨された方法を使用する場合、テキストエディタはこれらを認識されていない/不適切なコードとして自動的に削除します 。このフィルタは、エディタによって削除されないFontAwesomeアイコンを追加するための別のメカニズムを提供します。

MoodleでFontAwesomeを有効にする

FontAwesomアイコンはMoodleにこのフィルタを追加しただけでは機能しません。フィルタは単にそれらをコンテンツに追加するのを容易にします。このフィルタを使用する前に、まずあなたのサイトでFontAwesomeフォントが有効になっていることを確認する必要があります。 FontAwesomeを実行するには2つの方法があります。

FontAwesome対応テーマをインストール/使用する

いくつかのMoodleテーマはすでにFontAwesomeが有効になっています(例:Moodle Boostコアテーマ)。それらが正しいかどうかを調べるには、モジュールとプラグインデータベースでそれらについて見つけられた情報を読むだけです。

すでにFontAwesomeが含まれているテーマの1つに、Julian RiddenによるEssential Themeがあります。

CDN経由でFontAwesomeを読み込む

コンテンツ配信ネットワークまたはコンテンツ配信ネットワーク(CDN)は、インターネットを介して複数のデータセンターに配置されたサーバーの大規模分散システムです。 CDNの目的は、高利用と高性能でエンドユーザーにコンテンツを提供することです。あなたはあなたの管理設定に一行を追加することによってどんなテーマを使ってあなたのサイトにFontAwesomeを引っ張ることができます。この回線は専用のCDNに接続してFontAwesomeをあなたのMoodleサイトに確実にロードします。

あなたのMoodleにCDNを追加するには、サイト管理のあなたの"追加HTML"設定に以下の行を追加する必要があります。これは "Appearance"メニューの下にあります。

additionalhtml.png

"Additional HTML"設定に入ったら、 "Within HEAD"セクションに次の行を追加する必要があります。これにより、すべてのページ読み込みの一部としてFontAwesomeが読み込まれます。

 <link href = "// netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel = "スタイルシート">

下の画像のようになります。完了したら、FontAwesomeフィルターを使用する準備が整いました。

fontawesomecdn.png


アイコンを追加する

コース内の任意の場所にアイコンを追加するのは簡単なプロセスです。一番難しいのは、使いたいアイコンを見つけることです。 360以上のアイコンの完全なリストを閲覧するには、[ このリンク ]にアクセスしてください。アイコンが見つかったら、それを角かっこで囲む必要があります。例えば:

 [fa-camera-retro]

アイコン名を正しく入力した場合は、保存を押すとアイコンが表示されます。

設定可能なオプション

アイコンを大きくしたい場合は、乗数を使用できます。例えば:

 [fa-camera-retro fa-2x]または[fa-camera-retro fa-4x]

アイコンを回転させたい場合は、時計回りに何度回転するかを指定できます。例えば:

 [fa-camera-retro fa-rotate-90]

アイコンを水平または垂直に反転することもできます。例えば:

 [fa-camera-retro fa-flip-horizontal]または[fa-camera-retro fa-flip-vertical]

色を鈍い灰色にミュートすることができます。例えば:

 [fa-camera-retro fa-muted]

アイコンを左右に「引っ張る」ことができます。それが左に「引っ張られる」場合、テキストは右に折り返されます。例えば:

 [fa-camera-retro pull-left]

高度なヒント

上記のすべての設定を混在させて一致させることができます。たとえば、私が入力したとします。

 [fa-quote-left fa-4x pull-left fa-muted]

新しいスタイルをいくつか一緒に使用すると、簡単に引くことができる引用符や優れた入門記事の画像が得られます。コンテンツを読み込んで更新するためのアイコンを回転させることもできます。または複数行ボタンの大きなアイコンを楽しんでください。あなたは新しい可能性の多くを得るために任意の組み合わせでそれらのすべてを組み合わせることができます。

あなたは生成するでしょう:

fontawesome advancedtip.png

ダウンロードリンク

このフィルタはMoodle 2.5以降でのみ利用可能です。 4.8以上の新しいプラグインバージョンでは、Moodle 3.3以上でしか動作しないことに注意してください。あなたはhttps://moodle.org/plugins/view.php?plugin=filter_fontawesomeからフィルタをダウンロードすることができます

関連情報