Angular UI Bootstrap Datepicker glyphicons-halflings-regular.woff字体缺失

时间:2016-12-12 09:43:59

标签: javascript angularjs twitter-bootstrap playframework angular-ui-bootstrap

我正在使用uib-datepicker-popup组件(UI Bootstrap)。并且接缝处缺少字形字体。我正在使用webjars来加载依赖项。 文件夹资产字体肯定丢失,组件缺少下一个或上一个simbol

![next or previous is missing] 1

我在build.sbt中使用标准导入(“org.webjars”%“angular-ui-bootstrap”%“2.2.0”)

这是我的build.sbt:

// Dependencies
libraryDependencies ++= Seq(
  filters,
  evolutions,
  jdbc,
  cache,
  "com.typesafe.play" %% "anorm" % "2.5.0",
  "mysql" % "mysql-connector-java" % "5.1.36",
  "org.scalatestplus.play" %% "scalatestplus-play" % "1.5.0" % "test",
  "com.typesafe.play" %% "play-mailer" % "5.0.0",
  specs2 % Test,
  // WebJars (i.e. client-side) dependencies
  "org.webjars" %% "webjars-play" % "2.5.0",
  "org.webjars" % "requirejs" % "2.1.14-1",
  "org.webjars" % "underscorejs" % "1.6.0-3",
  "org.webjars" %  "font-awesome"  % "4.7.0",
  "org.webjars" % "jquery" % "1.11.1",
  "org.webjars" % "bootstrap" % "3.3.6" exclude("org.webjars", "jquery"),
  "org.webjars" % "angularjs" % "1.4.9" exclude("org.webjars", "jquery"),
  "org.webjars" % "angular-ui-bootstrap" % "2.2.0"
)

这是我的标题

                   

<!-- Favicon and Apple Icons -->
<link rel="shortcut icon" type="image/png" href='@routes.Assets.versioned("images/logo/logo_small.png")'>
<link rel="apple-touch-icon" href='@routes.Assets.versioned("images/ico/apple-touch-icon.png")'>
<link rel="apple-touch-icon" sizes="72x72" href='@routes.Assets.versioned("images/ico/apple-touch-icon-72x72.png")'>
<link rel="apple-touch-icon" sizes="114x114" href='@routes.Assets.versioned("images/ico/apple-touch-icon-114x114.png")'>

<!-- Angular JavaScript -->
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("jquery.min.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular.min.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular-resource.min.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular-route.min.js"))'></script>

<script type='text/javascript' src='@routes.Assets.versioned("javascripts/angular/app.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/angular/services.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/angular/directives.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/angular/controllers.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/dirPagination.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/angular-file-upload-all.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/angular-datepicker.js")'></script>
<script type="text/javascript" src="@routes.Application.jsRoutes"></script>

<!-- Date picker dependacy JavaScripts -->
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular-animate.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("angular-sanitize.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("ui-bootstrap-tpls.js"))'></script>
<script type='text/javascript' src='@routes.WebJarAssets.at(webJarAssets.locate("bootstrap.min.js"))'></script>


<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/jquery.bootstrap-growl.min.js")'></script>
<script type='text/javascript' src='@routes.Assets.versioned("javascripts/common/main.js")'></script>

我收到控制台错误,因为缺少字体:

 GET http://localhost:9000/assets/fonts/glyphicons-halflings-regular.woff 

 GET http://localhost:9000/assets/fonts/glyphicons-halflings-regular.ttf 

作为新手,我忘记了一些微不足道的事情。

1 个答案:

答案 0 :(得分:0)

提交问题时,我省略了问题来源

    <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/main.css")'>
    <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/angular-datepicker.css")'>
    <link rel="stylesheet" media="screen" href='@routes.WebJarAssets.at(webJarAssets.locate("font-awesome.min.css"))'>
    <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/bootstrap-cerulean.min.css")'>

我们正在使用基于bootstrap的模板Bootswatch:Cerulean,它有字体问题所以解决方案是手动将丢失的字体放在目录中

/public/fonts

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