jui(dwz)のメニューツリーを美しいアイコンのセットに変更

JUI は無料のオープンソース フレームワークです。使い始めの頃は、ドキュメントが少なすぎてどこから始めればよいかわからないため、いくつかの問題に遭遇するでしょう。しかし、一度詳しく学習すると、そのことがわかります。はい、あなたの選択は良いことです、それはあなたの開発効率を向上させると同時に、あなたはそれを深く愛するでしょう。

現在、会社は資金をあまりかけないという原則に基づいて (実際にはフロントエンドのレベルが限られているため)、いくつかの小さなプロジェクトに取り組んでいます。学習と開発の過程でいくつかの問題に遭遇しました。どれも満足のいく解決ができたので、とても満足でした。それを共有し、一緒に学び、進歩していきたいと思います。

レベルが限られているので、下手なところがあればご指摘ください。

今日か今後数日で、まずインターフェースを美しくすることに重点を置きます。今日はアイコンの美化から始めます。

まずは公式のオリジナルメニューアイコンを見てみましょう。統一されていてシンプルです。

変更されたアイコンを見てみましょう。カラフルで個性的で、華やかです。もっと美しく感じますか？目が輝いているように感じますか？

次に、詳しく説明していきましょう:

最初は、システムがデフォルトのアイコンを提供しているので、それを追加したり変更したりすることはできないのではないかと思いましたが、これは個人的なニーズとまったく矛盾しており、革新性に欠けるインターフェースを望んでいるのではないかと思います。だからまずはやってみるという姿勢から始めました。

私はブートストラップを使用しており、フォントアイコンに非常に興味があるので、fontawesome フォントファイルをダウンロードし、フレームの左側にあるメニューリストを次のように変更しました。

リーリー

はい、キーコードはこれです fontawesome を使用する利点は、画像を処理する必要がないことです。フォントの形式 表示と呼び出しを容易にするために、テキストの前に

を追加するだけです。

必要なアイコンが見つかるfontawesomeのアドレスを添付してください: http://fontawesome.dashgame.com/

このようにして、メニューの前にアイコンが追加されます。彼女は前よりも美しくなりましたか？しかし、それはまだ少し軽蔑的ではありませんか？確かに、なぜ彼らは全員黒いのでしょうか？

それでは、色を変更する方法を続けましょう。実際、賢い人ならすでにこのことを知っているはずです。 JUI にはいくつかのテンプレート セットが付属しており、スタイルを追加する限り、各テンプレート セットは CSS ファイルに対応します。

JUIのテーマディレクトリを開く

各ディレクトリの下に style.css ファイルがあるので、それを開いて、一番下にカスタムアイコンの色を追加します

リーリー

各テーマに対応する色を追加します。色を付けたい場合は、テーマの色に応じて自分で設定します。

この時点で、美しいツリーメニューアイコンが追加され、美化されています。