Creating a Faux Font-Icon Effect Using CSS and PNG

I am looking for a way to change the color of a transparent, grey-scale PNG icon as easily as changing the color of a font icon.

More details: The PNG icons have both outer transparencies and inner white areas for the actual symbol, along with a slight greyscale gradient for smooth edges. I am using Image Magic and don't mind making adjustments to the PNG file before finding a solution.

The reason I can't use a standard font-icon set is because we have custom icons that I have been unable to convert successfully. Therefore, I am exploring options like CSS "masking" to achieve the desired effect, but so far have not had success.

If anyone has ideas or suggestions, I am open to trying them out. My current thought is that leveraging CSS techniques might be effective, unless there is a tool available for converting PNGs to font-icons that I am not aware of.

To summarize: I have a greyscale PNG with transparency that I want to display on a website with a color defined by CSS.

Any thoughts or help would be greatly appreciated. Thank you!

csspngfont-facemask

Answer №1

If you want to achieve this effect using masking, it's actually quite simple:

.masked-element {
    width:200px;
    height:200px;
    position:relative;
    background-color: red;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: url(http://i35.tinypic.com/2091450.png); 
    mask-size: 100% 100%;
    mask-image: url(http://i35.tinypic.com/2091450.png); 
}

However, keep in mind that older browsers may not support this feature.

Check out the fiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Currently troubleshooting an issue with the CSS that is affecting the table header alignment

At first, I posed this Question and developed my own plugin to accomplish the task. However, I am encountering an unusual CSS issue with the table. Once I applied the plugin, the borders of table cells became disorganized. Here is a jsFiddle showcasing ...

javascriptjqueryhtmlcss

Optimizing the position of smart info windows in Google Maps

I am facing a challenge while attempting to switch the infowindow in Google maps to the smartinfowindow, as the position of the infowindow appears incorrect. This issue only occurs with the smartinfowindow and not with the standard infowindow. Upon furthe ...

javascriptcssgoogle-mapsinfowindow

What is the most efficient way to load a PHP page once the webpage has completely finished loading?

I'm relatively inexperienced when it comes to PHP and JQuery, so please bear with me if my knowledge is limited. Currently, I'm facing an issue where loading a small HTML table that contains information queried from game servers (like shown in t ...

phpjqueryhtmlcssquerying

Reveal content as you scroll

I'm having trouble with the code snippet below. My goal is to utilize .cbp-fbscroller in my CSS to show a new side navigation menu on my HTML page only when scrolling down to 900px. However, as someone who is new to JavaScript, I am struggling to make ...

javascriptjqueryhtmlcss

css Apply styles to form controls only if they are not empty

Utilizing an angularjs form, I have customized the following example to fit my code: .my-5 { margin:100px; } .form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: a ...

htmlcss

Developing User-Friendly Websites with Responsive Design

While I was working on my project, I realized that using only pixel values in tables and sidebars was a big mistake. This caused issues because if someone had a different screen resolution, my website would look distorted and unappealing. Could you please ...

htmlcsslaravel-5responsive-design

Tips for shrinking the circumference of a circle

Currently, I have a circular div that has been styled using CSS animations. My goal is to keep the size of the circle consistent when it moves to the bottom, but reduce its size when it bounces back to the top. I am uncertain if this can be achieved solely ...

javascriptjqueryhtmlcss

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML: <mat-dialog-actions class="dialog-actions"> <button class="cancel-btn" ...

javascripthtmlcssangulartypescript

Tips for aligning Picture boxes using CSS

As a newbie, I recently received training in HTML, CSS, and a bit of JavaScript. Currently, I am involved in a project where I display the latest news from an API. The technical aspects of fetching data from the API using JavaScript are handled by a senior ...

htmlcssformattingalignment

What are some ways to adjust the size of the option field in a select menu?

In my ionic popup, I have a HTML property called select with nested options. Below is the code snippet along with the applied CSS. My query is how can I set the white space to occupy the entire area of the select? https://i.stack.imgur.com/iPqAa.png http ...

javascripthtmlcss

What are some effective strategies for arranging multiple collapsible Bootstrap panels in an organized and visually appealing

I'm looking to use "collapsible bootstrap panels" to display a list, but I've run into an issue where certain panels don't align correctly when opened. For example, when I open the first panel in my code, all other panels shift down and sta ...

csstwitter-bootstrapgrid

Dealing with h2 text overflowing within a bordered container

I need help creating an h2 element with a double border. Here is my current HTML+CSS snippet: h2.titulo { width: 100%; margin: 10px 0; padding: 10px 0; text-transform: uppercase; font-weight: 400; font-size: 30px; display: block; color: ...

htmlcss

Instructions for making a crossword-inspired grid using a high quantity of divs or alternative elements

I am looking to create a grid on the screen of a web browser or mobile device, with each grid item containing just one letter. It's similar to a crossword puzzle, but taking up most of the screen. I've tried using divs for this purpose, but it se ...

javascripthtmlcssweb

Displaying content using Jquery's slideDown feature, overlapping existing content

I am working on displaying one piece of content over another using Jquery slidedown as an overlay. Despite adding z-index properties, I am struggling to make it work. My goal is to have the div with class "selection_nip" appear as an overlay on top of ano ...

jqueryhtmlcss

Harnessing the power of JavaScript functions to display an image when clicked

Looking for help with making an image appear when clicking on one of three images? Despite trying different approaches, the desired result is still not achieved. I'm aware of using if else statements but exploring other methods. Any insights on what m ...

javascripthtmlcssonclick

Encountering an issue while attempting to replicate the Spotify app on localhost:3000. The error message "TYPEERROR: Cannot read property 'url' of undefined" is hind

As a first-time user of stackoverflow, I am unfamiliar with its rules and regulations, so I apologize in advance for any mistakes I may make. Currently, I am attempting to create a Spotify clone using React. Everything was going smoothly until I completed ...

javascriptcssreactjs

Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them ...

htmlcsshtml-table

Ways to adjust the position of a DIV based on its index value

I'm currently working on a unique project that involves creating a triangular grid using HTML and CSS. The challenge I am facing is offsetting each triangle in the grid to the left by increasing amounts so they fit seamlessly next to one another. Righ ...

javascripthtmlcss

Problem with displaying JSF Bootstrap Glyphicons

I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason. Even after ensuring that the font files were intact and replacing them with fresh ones from versi ...

htmlcsstwitter-bootstrapjsf