8

Bootstrap を使用してプロジェクトのフロントエンドを構築しており、通常のテキストの代わりに 3.0.0 で見つかったGlyphiconを使用したいと考えています。どうすればいいですか？

Holder.jsに精通している人は、JS が基本的にクライアント側でプレースホルダー イメージを作成することを知っているでしょう。これには、スクリプトの重量 (約 4Kb) をダウンロードしてクライアントのマシンにイメージを生成させるだけでよいため、帯域幅を節約する便利なアプリケーションがあります。

Glyphicons を holder.js と組み合わせて、その場で大きな高品質のアイコンを生成したいと考えています。

Bootstrap を使用して Glyphicon を呼び出すのは、次のように簡単です。

<span class="glyphicon glyphicon-user"></span>

holder.js で「Hello World」というテキストを含む動的画像を呼び出すには、次のようにします。

<img data-src="holder.js/200x200/text:Hello World">

Bootstrap CSS が Glyphicon クラスをフォントとして定義し、疑似 before 要素を使用して、2 次クラスによって定義された特定の文字を呼び出すことを理解しています。下記参照：

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

.glyphicon-user:before {
    content: "\e008";
}

画像アイコンを出力するために、特定のグリフィコン文字を正しいフォントで holder.jsに簡単に渡すにはどうすればよいですか?

4

3 に答える 3

12

わかりました、これは誰の関心もピークに達しませんでした。しかし、私は自分で問題を解決しました。私の解決策をコミュニティと共有するのは良いエチケットだと思いました。

私は2つのことをしなければなりませんでした。holder.js が JavaScript キャンバス描画を png 画像ファイルに解析することに気付いた後、問題は「holder.js」の問題ではなく、純粋な JS および Web フォント/フォントフェイスの問題でした。

最初に、グリフィコンがフォントであり、何を参照しているのかをシステムに明示的に伝える必要がありました。私は次のCSSでこれを行いました：

@font-face {
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: normal;
            src: local('Glyphicons Halflings'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
        }

2 つ目:使用しているフォントの名前、場所、種類をブラウザーが認識すると、それを使用して Unicode 文字を JS キャンバス オブジェクトに渡すことができるようになります。Holder.js には、「テーマ」の配列を保持する設定 Var があります。次のカスタム テーマを配列に追加しました。

"blueGlyph": {
        background: "#3a87ad",
        foreground: "#ffffff",
        size: 128,
        font:"Glyphicons Halflings"
    }

3 番目:あとは、Unicode 文字を JS スクリプトに渡すだけで、その場でアイコン イメージが生成されます。HTML は次のようになります。

<img src="data:image/png;base64," data-src="holder.js/140x140/text:&#xe093;/blueGlyph">

これにより、次の動的に生成された画像が生成されました。

ここに画像の説明を入力

Unicode 文字を選択して、解釈および描画できる正しい形式で渡すための鍵は、HTML メソッドを使用して Unicode 文字を渡すことでした。つまり &#x*{UNICODE HERE}*; . または「 ;」上記の例のとおりです。

あなたがそれをいじりたいなら、ここにフィドルがあります。

于 2013-10-09T12:46:12.137 に答える
2

ネットで調べてみましたが、解決策が見つかりませんでした。imsky が言ったように、それは「長方形」(行方不明の文字) として表示されます。だから私は自分のソリューションを作成しようとしましたが、これはholder.jsで画像を作成していません

<div class="col-xs-6 col-md-3">
   <a href="#" class="thumbnail">
       <span class="big-icon glyphicon glyphicon-glass"></span>
   </a>
</div>

そしてcssスタイルで：

<style>
.big-icon{
   margin:10px;
   font-size:100px;
}
.thumbnail{
   text-align:center;
}
</style>

結果は次のとおりです。
ここに画像の説明を入力


しかし、私はまだ解決策を探しています:Holder.js イメージで Bootstrap Glyphicons を使用する方法。どんな助けでも大歓迎です。

ありがとう

于 2014-07-18T15:21:48.847 に答える
-1

しかし、解決策がすでに利用可能であるのに、なぜそんなに混乱しているのでしょうか。holder.js に関連するすべての変更を削除して基本に戻り、これらの行をドキュメントの最後に追加して、変更を確認してください......

 $(function() {
        $('img').each(function() {
            var img = $(this);
            img.error(function() {
                img.replaceWith('<span class="glyphicon glyphicon-user" style=" background-color: #eee;  font-size: 100pt"></span>');
            });
        });
    });

さらにヘルプが必要な場合は、ranjeet1985@gmail.com までメールでお問い合わせください。

于 2014-12-20T13:58:30.287 に答える