PlayFramework2.2.xでfont-awesomeを使用する

@iwasaki 457views 更新:2014年3月28日

font-awesomeもWebJarsにあるのでこれを使って、Play Framework2系でfont-awesomeを使えるようにしてみます。

まずは読み込みの設定

build.sbt

libraryDependencies ++= Seq(
  // Select Play modules
  "org.webjars" % "font-awesome" % "4.0.3")

のようにして追記します。 なお、ここに追記した場合は

play compile

 し直さないとリポジトリから落としてこないので注意です。

http://www.webjars.org/

には2014年3月28日の時点で4.0.3が用意されています。

テンプレートで呼び出す際には上記サイトの一覧から該当するライブラリの「33Files」などのリンクをクリックすると読み込むファイルリストが表示されます。

META-INF/resources/webjars/font-awesome/4.0.3/fonts/fontawesome-webfont.eot
META-INF/resources/webjars/font-awesome/4.0.3/fonts/FontAwesome.otf
META-INF/resources/webjars/font-awesome/4.0.3/fonts/fontawesome-webfont.ttf
META-INF/resources/webjars/font-awesome/4.0.3/fonts/fontawesome-webfont.woff
META-INF/resources/webjars/font-awesome/4.0.3/fonts/fontawesome-webfont.svg
META-INF/resources/webjars/font-awesome/4.0.3/scss/_mixins.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_rotated-flipped.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_bordered-pulled.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_spinning.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_path.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_list.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_variables.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_core.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/font-awesome.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_larger.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_stacked.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_fixed-width.scss
META-INF/resources/webjars/font-awesome/4.0.3/scss/_icons.scss
META-INF/resources/webjars/font-awesome/4.0.3/css/font-awesome.min.css
META-INF/resources/webjars/font-awesome/4.0.3/css/font-awesome.css
META-INF/resources/webjars/font-awesome/4.0.3/less/variables.less
META-INF/resources/webjars/font-awesome/4.0.3/less/mixins.less
META-INF/resources/webjars/font-awesome/4.0.3/less/list.less
META-INF/resources/webjars/font-awesome/4.0.3/less/icons.less
META-INF/resources/webjars/font-awesome/4.0.3/less/core.less
META-INF/resources/webjars/font-awesome/4.0.3/less/path.less
META-INF/resources/webjars/font-awesome/4.0.3/less/fixed-width.less
META-INF/resources/webjars/font-awesome/4.0.3/less/font-awesome.less
META-INF/resources/webjars/font-awesome/4.0.3/less/stacked.less
META-INF/resources/webjars/font-awesome/4.0.3/less/rotated-flipped.less
META-INF/resources/webjars/font-awesome/4.0.3/less/bordered-pulled.less
META-INF/resources/webjars/font-awesome/4.0.3/less/spinning.less
META-INF/resources/webjars/font-awesome/4.0.3/less/larger.less

あとはテンプレートに

<link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("css/font-awesome.css"))'>

みたいにして呼び出せばOKです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません