Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 321
  • Last Modified:

Base64 icons

Hello,
    I am using sencha touch in a project.  I have encoded some icons in the css using Base64. The resulting icon classes work great in sencha touch. The problem is I would like to reuse some the icons using good ole html and css. I have seen examples like this that uses Base64.

<img alt="Embedded Image"
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

the problem is my icons are already setup as a class for sencha touch. like so..

       .favsIcon {-webkit-mask-box-image:url(data:image/png;base64,iVBORw0K....
}

How do I call this class to display the icon in html? or even as a background image of another class? I want to avoid having to use the icon file if I don't have to.

Thanks
0
JohnBran
Asked:
JohnBran
1 Solution
 
hieloCommented:
You can declare an "icon" class-ex:

.icon {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

Then to use it, you just assign that class to the element:
<div class="icon">...</div>

An element can have multiple classes. You just need to separate them with a space. Thus, you can "reuse" your "icon" class definition:
<div class="someClass someOtherClass icon">...</div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now