如何使用Onsen-UI自定义图像/图标

Question

我使用Onsen-UI框架和AngularJS开发移动应用。 我想为按钮使用一些自定义图像，但是当我在某些手机上打开应用程序时，它们看起来很模糊或定义不明确。

这是我的代码（我在旋转木马中使用图片）：

<ons-carousel swipeable initial-index="0" auto-scroll>
  <ons-carousel-item class="list-action-item">
    <!-- item title -->
  </ons-carousel-item>

  <ons-carousel-item class="list-action-menu">
    <!-- item action menu -->
    <img src="../images/my_custom_image.png">
  </ons-carousel-item>
</ons-carousel>

根据Onsen documentation我可以使用图标，指定要使用的图标引擎（Ionicons或Font-Awesome），如下所示：

  <ons-carousel-item class="list-action-menu">
    <!-- item action menu -->
    <ons-icon icon="fa-angle-left" size="40px"></ons-icon>
  </ons-carousel-item>

但在这种情况下，我无法设置自定义图像。

过去我用Eclipse开发了一些Android应用程序，我有不同的文件夹来处理不同的屏幕分辨率。我的意思是：

那么，温泉怎么做呢？

Answer 1

Well Onsen UI使用字体作为图标。因此，如果您希望所有内容都工作，因为Onsen UI期望您需要自定义字体并使用它。但创建一个可能并不简单，所以我希望您只想将服务器上的自定义映像作为单独的文件。

技术上使用字体的性能更高，因为您可以将数百个图标存储在一个字体中，这样浏览器只能对所有图标一起请求1个，而不是每个图标1个请求。它还可以更有效地存储图标。但是让我们放弃性能优化（如果您有兴趣也可以查看css sprites和base64） - 这不是您的问题，但它仍然是相关的对于这个问题，所以我想我也可以提一下。

现在回答：

由于您可能不会使用字体，因此您可以定义自己的类，并针对不同的屏幕尺寸使用不同的背景图像和大小。

.my-custom-icon {
  font-size: 40px;
  height: 1em;
  background: url('https://onsen.io/images/common/docs-guide-icon.png') center no-repeat;
}


@media only screen and (max-width: 300px) {
  .my-custom-icon {
    font-size: 30px;
    background-image: url('https://onsen.io/images/common/docs-css-components-icon.png');
  }
}

Demo

这只是一个例子，但它向您展示了如何轻松地为不同的屏幕使用不同的图像。

您甚至可以在不同的文件中定义不同屏幕的样式，并且只在需要时再次使用它们：

<link rel="stylesheet" media="(max-width: 300px)" href="small.css" />