CODEWITHSUNDEEP
javascriptangularjsimageiconsonsen-ui
smartmouse
smartmouse

Reputation: 14404

How to use custom images/icons with Onsen-UI

i'm using Onsen-UI framework and AngularJS for developing a mobile app. I would like to use some custom images for buttons, but they appear blurred or not well-defined when i open app on some mobile phones.

Here is my code (i'm using images within a carousel):

<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>

According to Onsen documentation i could use icons, specifing which icons engine to use (Ionicons or Font-Awesome), like this:

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

But in this case i can't set custom images.

In the past i developed some Android apps with Eclipse and i had different folders to handle different screen resolutions. I mean this:

enter image description here

So, with Onsen how to do the same?

Upvotes: 1

Views: 3155

Answers (1)

Ilia Yatchev
Ilia Yatchev

Reputation: 1262

Well Onsen UI uses fonts for icons. So in case you want to have everything work as Onsen UI expects you would need to have a custom font and use that. But creating one might not be trivial, so I'm expecting that you just want to have a custom image which you have on the server as a separate file.

Technically using fonts is more performant because you can have hundreds of icons stored in a font, so that the browser makes only 1 request for all icons together, rather than 1 request per icon. It also stores the icons more efficiently. But lets leave the performance optimisations aside (if you're interested you can also check css sprites and base64) - that wasn't your question, but still it's something related to the question so I thought that I may as well mention it.

Now for the answer:

Since you probably won't be using fonts you can just define your own classes and have different background-image and size for the different screen sizes.

.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

This is just an example, but it shows you how easily you can use different images for different screens.

You can even define the styles for the different screens in different files and they will again be used only when needed:

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

Upvotes: 3

Related Questions