0

Twitter Bootstrap (Glyphicon Halflings セット) に含まれるアイコンを jqgrid で使用するには?

jqgrid では FontAwesome アイコンを使用できますが、これには追加のファイルを含める必要があります。ブートストラップには既にアイコンが含まれているため ( http://getbootstrap.com/components/ )、追加のファイルは重複を引き起こし、必要ありません。

jqgrid でデフォルトのブートストラップ アイコンを使用するには?

アップデート

FontAwesome と jquery ui の画像イメージを追加する必要がないように、すべての FontAwesome アイコンを置き換える方法を探しています。

デモ

http://www.ok-soft-gmbh.com/jqGrid/OK/navButtons2-fa4.htm

置き換える必要のある基本的なアイコンを表示します。

上から新しいアイコン:

  • 追加 - グリフィコンプラス
  • 編集 - glyphicon-pencil

等

通常、FontAwecome と Glyphicons は同じ名前です。対応表あり

http://tagliala.github.io/vectoriconsroundup/

もう 1 つの可能性は、CSS を使用してアイコンを作成することです。この場合、特別なアイコン フォントはまったく必要ありません。

4

1 に答える 1

4

作り方はウィキの記事に書いてますcustom iconSet

Font Awesome の一部と Twitter Bootstrap の一部 ( Glyphicon Halflings set ) の混合アイコンを使用したカスタム iconSet の作成を示すデモを用意しました。下の図のような結果が表示されます

ここに画像の説明を入力

ここで、追加、編集、およびその他のアイコン (表示アイコンは除く) は Glyphicon のものです。

ここに画像の説明を入力

次のコードを使用して、faクラスの使用を最上位commonのプロパティから子の場所に移動しました。ナビゲーターバーで混合アイコンを使用する必要があったためです。個々のアイコン定義ごとに空のクラスnav.commonと移動したクラスを定義しました。faコードの最も重要な部分は次のとおりです

$.extend(true, $.jgrid.icons, {
    glyphIcon: {
        //common: "",
        pager: {
            common: "fa fa-fw",
            first: "fa-step-backward",
            prev: "fa-backward",
            next: "fa-forward",
            last: "fa-step-forward"
        },
        ...
        nav: {
            common: "",
            edit: "glyphicon glyphicon-pencil",
            add: "glyphicon glyphicon-plus",
            del: "glyphicon glyphicon-trash",
            search: "glyphicon glyphicon-search",
            refresh: "glyphicon glyphicon-refresh",
            view: "fa fa-lg fa-fw fa-file-o",
            save: "glyphicon glyphicon-save",
            cancel: "glyphicon glyphicon-ban-circle",
            newbutton: "fa fa-lg fa-fw fa-external-link"
        },
        ...
    }
});

$grid.jqGrid({
    ...
    iconSet: "glyphIcon",
    ...
});

glyphIconアイコン セットの定義を、デフォルトで無料の jqGrid に含まれているアイコン セットの定義と比較することをお勧めします (jQueryUI行を参照)。fontAwesome

于 2015-03-26T17:58:56.807 に答える