【ワテの備忘録】ASP.NET MVCでBootstrap Glyphiconを使う

この記事は約23分で読めます。
スポンサーリンク

例えばこんな封筒のアイコン(Envelope icon)を

 

使いたい場合に、Bootstrap Glyphiconと言うのを使うと簡単に出来る。

では、本題に入ろう。

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
スポンサーリンク
スポンサーリンク

Bootstrap Glyphicon

「Glyphicon」は何て発音するのかな?

グリフィコンなのか?

まあそれは今後確認したい。

さて、ワテも

  • HTML
  • CSS
  • JavaScript
  • jQuery

の勉強を始めて約1年半になる。

今では初心者を脱出して中級者くらいには成れたと思っているが、初心者だった頃だと、ボタンに絵柄を入れたい場合には、

  • まず、フリー素材でアイコンに使えそうな画像を探す
  • オンラインの画像→アイコン変換サイトで32×32のアイコンを作成
  • その画像をボタンのbackground-imageに指定する

などの手法でやっていた。

まあ、それでも出来るのだが、ワテの場合にはデザインセンスが無いので寄せ集めで色んな画像を使っているとサイトの見栄えに一貫性が無くて統一感が感じられない。

最近良い方法を見付けた。

それがBootstrap Glyphiconと言うやつだ。

Bootstrap Glyphiconのアイコン例

下に示すように多数の絵柄のアイコン画像がある。

使い方も簡単だ。

 

  •  

    glyphicon glyphicon-asterisk

  •  

    glyphicon glyphicon-plus

  •  

    glyphicon glyphicon-euro

  •  

    glyphicon glyphicon-eur

  •  

    glyphicon glyphicon-minus

  •  

    glyphicon glyphicon-cloud

  •  

    glyphicon glyphicon-envelope

  •  

    glyphicon glyphicon-pencil

  •  

    glyphicon glyphicon-glass

  •  

    glyphicon glyphicon-music

  • glyphicon glyphicon-search

  •  

    glyphicon glyphicon-heart

  •  

    glyphicon glyphicon-star

  •  

    glyphicon glyphicon-star-empty

  •  

    glyphicon glyphicon-user

  •  

    glyphicon glyphicon-film

  •  

    glyphicon glyphicon-th-large

  •  

    glyphicon glyphicon-th

  •  

    glyphicon glyphicon-th-list

  •  

    glyphicon glyphicon-ok

  •  

    glyphicon glyphicon-remove

  •  

    glyphicon glyphicon-zoom-in

  •  

    glyphicon glyphicon-zoom-out

  •  

    glyphicon glyphicon-off

  •  

    glyphicon glyphicon-signal

  •  

    glyphicon glyphicon-cog

  •  

    glyphicon glyphicon-trash

  •  

    glyphicon glyphicon-home

  •  

    glyphicon glyphicon-file

  •  

    glyphicon glyphicon-time

  •  

    glyphicon glyphicon-road

  •  

    glyphicon glyphicon-download-alt

  •  

    glyphicon glyphicon-download

  •  

    glyphicon glyphicon-upload

  •  

    glyphicon glyphicon-inbox

  •  

    glyphicon glyphicon-play-circle

  •  

    glyphicon glyphicon-repeat

  •  

    glyphicon glyphicon-refresh

  •  

    glyphicon glyphicon-list-alt

  •  

    glyphicon glyphicon-lock

  •  

    glyphicon glyphicon-flag

  •  

    glyphicon glyphicon-headphones

  •  

    glyphicon glyphicon-volume-off

  •  

    glyphicon glyphicon-volume-down

  •  

    glyphicon glyphicon-volume-up

  •  

    glyphicon glyphicon-qrcode

  •  

    glyphicon glyphicon-barcode

  •  

    glyphicon glyphicon-tag

  •  

    glyphicon glyphicon-tags

  •  

    glyphicon glyphicon-book

  •  

    glyphicon glyphicon-bookmark

  •  

    glyphicon glyphicon-print

  •  

    glyphicon glyphicon-camera

  •  

    glyphicon glyphicon-font

  •  

    glyphicon glyphicon-bold

  •  

    glyphicon glyphicon-italic

  •  

    glyphicon glyphicon-text-height

  •  

    glyphicon glyphicon-text-width

  •  

    glyphicon glyphicon-align-left

  •  

    glyphicon glyphicon-align-center

  •  

    glyphicon glyphicon-align-right

  •  

    glyphicon glyphicon-align-justify

  •  

    glyphicon glyphicon-list

  •  

    glyphicon glyphicon-indent-left

  •  

    glyphicon glyphicon-indent-right

  •  

    glyphicon glyphicon-facetime-video

  •  

    glyphicon glyphicon-picture

  •  

    glyphicon glyphicon-map-marker

  •  

    glyphicon glyphicon-adjust

  •  

    glyphicon glyphicon-tint

  •  

    glyphicon glyphicon-edit

  •  

    glyphicon glyphicon-share

  •  

    glyphicon glyphicon-check

  •  

    glyphicon glyphicon-move

  •  

    glyphicon glyphicon-step-backward

  •  

    glyphicon glyphicon-fast-backward

  •  

    glyphicon glyphicon-backward

  •  

    glyphicon glyphicon-play

  •  

    glyphicon glyphicon-pause

  •  

    glyphicon glyphicon-stop

  •  

    glyphicon glyphicon-forward

  •  

    glyphicon glyphicon-fast-forward

  •  

    glyphicon glyphicon-step-forward

  •  

    glyphicon glyphicon-eject

  •  

    glyphicon glyphicon-chevron-left

  •  

    glyphicon glyphicon-chevron-right

  •  

    glyphicon glyphicon-plus-sign

  •  

    glyphicon glyphicon-minus-sign

  •  

    glyphicon glyphicon-remove-sign

  •  

    glyphicon glyphicon-ok-sign

  •  

    glyphicon glyphicon-question-sign

  •  

    glyphicon glyphicon-info-sign

  •  

    glyphicon glyphicon-screenshot

  •  

    glyphicon glyphicon-remove-circle

  •  

    glyphicon glyphicon-ok-circle

  •  

    glyphicon glyphicon-ban-circle

  •  

    glyphicon glyphicon-arrow-left

  •  

    glyphicon glyphicon-arrow-right

  •  

    glyphicon glyphicon-arrow-up

  •  

    glyphicon glyphicon-arrow-down

  •  

    glyphicon glyphicon-share-alt

  •  

    glyphicon glyphicon-resize-full

  •  

    glyphicon glyphicon-resize-small

  •  

    glyphicon glyphicon-exclamation-sign

  •  

    glyphicon glyphicon-gift

  •  

    glyphicon glyphicon-leaf

  •  

    glyphicon glyphicon-fire

  •  

    glyphicon glyphicon-eye-open

  •  

    glyphicon glyphicon-eye-close

  •  

    glyphicon glyphicon-warning-sign

  •  

    glyphicon glyphicon-plane

  •  

    glyphicon glyphicon-calendar

  •  

    glyphicon glyphicon-random

  •  

    glyphicon glyphicon-comment

  •  

    glyphicon glyphicon-magnet

  •  

    glyphicon glyphicon-chevron-up

  •  

    glyphicon glyphicon-chevron-down

  •  

    glyphicon glyphicon-retweet

  •  

    glyphicon glyphicon-shopping-cart

  •  

    glyphicon glyphicon-folder-close

  •  

    glyphicon glyphicon-folder-open

  •  

    glyphicon glyphicon-resize-vertical

  •  

    glyphicon glyphicon-resize-horizontal

  •  

    glyphicon glyphicon-hdd

  •  

    glyphicon glyphicon-bullhorn

  •  

    glyphicon glyphicon-bell

  •  

    glyphicon glyphicon-certificate

  •  

    glyphicon glyphicon-thumbs-up

  •  

    glyphicon glyphicon-thumbs-down

  •  

    glyphicon glyphicon-hand-right

  •  

    glyphicon glyphicon-hand-left

  •  

    glyphicon glyphicon-hand-up

  •  

    glyphicon glyphicon-hand-down

  •  

    glyphicon glyphicon-circle-arrow-right

  •  

    glyphicon glyphicon-circle-arrow-left

  •  

    glyphicon glyphicon-circle-arrow-up

  •  

    glyphicon glyphicon-circle-arrow-down

  •  

    glyphicon glyphicon-globe

  •  

    glyphicon glyphicon-wrench

  •  

    glyphicon glyphicon-tasks

  •  

    glyphicon glyphicon-filter

  •  

    glyphicon glyphicon-briefcase

  •  

    glyphicon glyphicon-fullscreen

  •  

    glyphicon glyphicon-dashboard

  •  

    glyphicon glyphicon-paperclip

  •  

    glyphicon glyphicon-heart-empty

  • glyphicon glyphicon-link

  •  

    glyphicon glyphicon-phone

  •  

    glyphicon glyphicon-pushpin

  •  

    glyphicon glyphicon-usd

  •  

    glyphicon glyphicon-gbp

  •  

    glyphicon glyphicon-sort

  •  

    glyphicon glyphicon-sort-by-alphabet

  •  

    glyphicon glyphicon-sort-by-alphabet-alt

  •  

    glyphicon glyphicon-sort-by-order

  •  

    glyphicon glyphicon-sort-by-order-alt

  •  

    glyphicon glyphicon-sort-by-attributes

  •  

    glyphicon glyphicon-sort-by-attributes-alt

  •  

    glyphicon glyphicon-unchecked

  •  

    glyphicon glyphicon-expand

  •  

    glyphicon glyphicon-collapse-down

  •  

    glyphicon glyphicon-collapse-up

  • glyphicon glyphicon-log-in

  •  

    glyphicon glyphicon-flash

  •  

    glyphicon glyphicon-log-out

  •  

    glyphicon glyphicon-new-window

  •  

    glyphicon glyphicon-record

  •  

    glyphicon glyphicon-save

  •  

    glyphicon glyphicon-open

  •  

    glyphicon glyphicon-saved

  •  

    glyphicon glyphicon-import

  •  

    glyphicon glyphicon-export

  •  

    glyphicon glyphicon-send

  •  

    glyphicon glyphicon-floppy-disk

  •  

    glyphicon glyphicon-floppy-saved

  •  

    glyphicon glyphicon-floppy-remove

  •  

    glyphicon glyphicon-floppy-save

  •  

    glyphicon glyphicon-floppy-open

  •  

    glyphicon glyphicon-credit-card

  •  

    glyphicon glyphicon-transfer

  •  

    glyphicon glyphicon-cutlery

  •  

    glyphicon glyphicon-header

  •  

    glyphicon glyphicon-compressed

  •  

    glyphicon glyphicon-earphone

  •  

    glyphicon glyphicon-phone-alt

  •  

    glyphicon glyphicon-tower

  •  

    glyphicon glyphicon-stats

  •  

    glyphicon glyphicon-sd-video

  •  

    glyphicon glyphicon-hd-video

  •  

    glyphicon glyphicon-subtitles

  •  

    glyphicon glyphicon-sound-stereo

  •  

    glyphicon glyphicon-sound-dolby

  •  

    glyphicon glyphicon-sound-5-1

  •  

    glyphicon glyphicon-sound-6-1

  •  

    glyphicon glyphicon-sound-7-1

  • glyphicon glyphicon-copyright-mark

  •  

    glyphicon glyphicon-registration-mark

  •  

    glyphicon glyphicon-cloud-download

  •  

    glyphicon glyphicon-cloud-upload

  •  

    glyphicon glyphicon-tree-conifer

  •  

    glyphicon glyphicon-tree-deciduous

  •  

    glyphicon glyphicon-cd

  •  

    glyphicon glyphicon-save-file

  •  

    glyphicon glyphicon-open-file

  •  

    glyphicon glyphicon-level-up

  •  

    glyphicon glyphicon-copy

  •  

    glyphicon glyphicon-paste

  •  

    glyphicon glyphicon-alert

  •  

    glyphicon glyphicon-equalizer

  •  

    glyphicon glyphicon-king

  •  

    glyphicon glyphicon-queen

  •  

    glyphicon glyphicon-pawn

  •  

    glyphicon glyphicon-bishop

  •  

    glyphicon glyphicon-knight

  •  

    glyphicon glyphicon-baby-formula

  •  

    glyphicon glyphicon-tent

  •  

    glyphicon glyphicon-blackboard

  •  

    glyphicon glyphicon-bed

  •  

    glyphicon glyphicon-apple

  •  

    glyphicon glyphicon-erase

  •  

    glyphicon glyphicon-hourglass

  •  

    glyphicon glyphicon-lamp

  •  

    glyphicon glyphicon-duplicate

  •  

    glyphicon glyphicon-piggy-bank

  •  

    glyphicon glyphicon-scissors

  •  

    glyphicon glyphicon-bitcoin

  •  

    glyphicon glyphicon-btc

  •  

    glyphicon glyphicon-xbt

  •  

    glyphicon glyphicon-yen

  •  

    glyphicon glyphicon-jpy

  •  

    glyphicon glyphicon-ruble

  •  

    glyphicon glyphicon-rub

  •  

    glyphicon glyphicon-scale

  •  

    glyphicon glyphicon-ice-lolly

  •  

    glyphicon glyphicon-ice-lolly-tasted

  •  

    glyphicon glyphicon-education

  •  

    glyphicon glyphicon-option-horizontal

  •  

    glyphicon glyphicon-option-vertical

  •  

    glyphicon glyphicon-menu-hamburger

  •  

    glyphicon glyphicon-modal-window

  •  

    glyphicon glyphicon-oil

  •  

    glyphicon glyphicon-grain

  •  

    glyphicon glyphicon-sunglasses

  •  

    glyphicon glyphicon-text-size

  •  

    glyphicon glyphicon-text-color

  •  

    glyphicon glyphicon-text-background

  •  

    glyphicon glyphicon-object-align-top

  •  

    glyphicon glyphicon-object-align-bottom

  •  

    glyphicon glyphicon-object-align-horizontal

  •  

    glyphicon glyphicon-object-align-left

  •  

    glyphicon glyphicon-object-align-vertical

  •  

    glyphicon glyphicon-object-align-right

  •  

    glyphicon glyphicon-triangle-right

  •  

    glyphicon glyphicon-triangle-left

  •  

    glyphicon glyphicon-triangle-bottom

  •  

    glyphicon glyphicon-triangle-top

  •  

    glyphicon glyphicon-console

  •  

    glyphicon glyphicon-superscript

  •  

    glyphicon glyphicon-subscript

  •  

    glyphicon glyphicon-menu-left

  •  

    glyphicon glyphicon-menu-right

  •  

    glyphicon glyphicon-menu-down

  •  

    glyphicon glyphicon-menu-up

 

Bootstrap Glyphiconの使い方

 

<p class="glyphicon glyphicon-envelope"> </p>

とすれば

 

 

となる。

この例では pタグを使っているが、<button>でも<a>でも何でも良い。

 

glyphicons-halflings-regular.woff2 がダウンロードされない問題と対策

さて、これで問題なく glyphicons が表示出来るようになったと思ったのが、ブラウザーでASP.NET MVC のサイトを表示させて見ると、こんなエラーが出ている。

glyphicons-halflings-regular.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)

おかしい。ファイル自体はIISサーバー側に確かに存在している。

また、同じfontフォルダの中には、

 font/glyphicons-halflings-regular.ttf
 font/glyphicons-halflings-regular.svg
 font/glyphicons-halflings-regular.eot
 font/glyphicons-halflings-regular.woff
 font/glyphicons-halflings-regular.woff2

などのファイルがあるが、何故か拡張子 .woff2 のみダウンロード出来ない。

試しに、

 font/glyphicons-halflings-regular.woff2

 font/glyphicons-halflings-regular2.woff

に名前を変えてみたら正しくダウンロード出来る。

問題は拡張子 .woff2 が原因のようだ。

なんでかな?

エラーメッセージなどで検索をしたら原因が判明した、

 

woff2 というフォーマットは2015年頃に追加された新しいフォーマットらしい。

それでASP.NET MVCと言うかIISかな、はそのフォーマットの処理方法が分からないようだ。

解決方法は二つある。

解決方法1 ASP.NET MVCプロジェクトの web.config に以下の行を追加する。

<system.webServer>
  <staticContent>
   <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
  </staticContent>
</system.webServer> 

実際にこの方法を試したら無事に .woff2 ファイルが正しくダウンロード出来るようになった。

あるは、ASP.NETMVCのC#のコードで StaticFilesOptions と言うのを使っても良いらしい。

public void Configure(IApplicationBuilder app)
{
  StaticFileOptions options = new StaticFileOptions();
  FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();
  if (!typeProvider.Mappings.ContainsKey(".woff2"))
  {
    typeProvider.Mappings.Add(".woff2", "application/font-woff2");
  }
  options.ContentTypeProvider = typeProvider;
  app.UseStaticFiles(options);
}
 

引用元 http://stackoverflow.com/questions/28746721/application-font-woff2-not-working-when-using-asp-net-vnext

なお、この二番目の方式は、コードのどこに入れたら良いのか未確認なので試していない。

 

う~ん、ASP.NET MVC は何かと面倒くさい事が多い気がする。

 

つまりその、設定が多いのだ。

routes.MapRoute()

を使ったルーティング設定。

Web.configファイル

を使ったIISに関する各種の設定。こちらでもルーティング設定が出来る。

まあ、設定が多いと言う事は、細かい設定が可能なのでやり方を覚えるととっても便利なのだが、ワテの場合、このルーティング設定が苦手で困っている。

まとめ

ASP.NET MVCやASP.NET COREは面白い。

ASP.NET MVCをやるんなら、山田 祥寛さんの本が人気ある。

著者の山田 祥寛さんは、プログラミング解説本では超有名人だ。

ASP.NET COREの場合も、基本はASP.NET MVCなのでまずはMVCの手法をマスターするのが良いだろう。

なお、ワテのブログの読者の方で、

  • ASP.NET MVC
  • Visual Studio
  • C#
  • その他、プログラミングに関する話題

などに関して、何か質問、相談など有りましたら、お気軽にコメント欄からご連絡下さい。

スポンサーリンク
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

ASP.NET
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント