Designing unique icons through image manipulation in CSS

I am currently experimenting with creating an icon that functions similar to font-awesome. When I apply a specific class, it should display an image based on the font size. Surprisingly, I got it to work in Chrome but for some reason, the same code doesn't seem to function properly in Firefox.

div {
  font-size: 14px;
}
.custom-icon-jazz {
    content: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
    height: 2em;
    width: 4em;
  }
  .custom-icon-jazz::before {
    content: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
    height: 2em;
    width: 4em;
  }
<div>
  <i class="custom-icon-jazz"></i>  
</div>

::before seems to only be effective in Firefox. In contrast, Chrome applies the normal class without any issues.

To simplify this issue, I have created a demonstrative pen which showcases how the image appears in different sizes across various browsers. By visiting this link, you can observe the discrepancies between Firefox and Chrome's rendering of this pen.

css

Answer №1

Remember that the :after pseudo-element creates a box that contains the image. You can't style the image itself, but you can customize the box it's in. It's possible to adjust the background-size. However, you still need to specify the width and height of the block.

Here's a suggested approach:

div {
  font-size: 14px;
  .custom-icon-jazz {
    background-image: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
    background-size: 4em 2em;
    height: 2em;
    width: 4em;
    content:"";
    display: inline-block;
  }
  .custom-icon-jazz::before {
    background-image: url(https://image.ibb.co/iHHaWS/jazzcash_color_logo.png);
    background-size: 4em 2em;
    height: 2em;
    width: 4em;
    content:"";
    display: inline-block;
  }
}
<div>
  <i class="custom-icon-jazz"></i>  
</div>

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

Consistent Gaps Among Any Number of Buttons

I have a scenario where I have multiple buttons arranged in different lines. Currently, when a button doesn't fit on a line, it moves to the next line leaving blank space behind. What I want is to evenly space out the buttons that manage to be on the ...

htmlcssbootstrap-5

Tips for utilizing the fixed position within a flexbox design

I am working on a flexbox layout with two columns. The left column needs to be fixed, while the right column should be scrollable. Can you provide some guidance on how to achieve this? Here is the code snippet that I have been using: #parent { d ...

htmlcssflexbox

Using Vue.js but unable to see Swiper's next and previous buttons?

I've been attempting to create a swiper with previous, active, and next buttons while hiding the other buttons. Unfortunately, none of my attempts have been successful. I'm currently using version 9.3.0 of the swiper package. Any suggestions on w ...

cssvue.js

Concealing a block from top to bottom

I currently have a filter that is hidden when clicked, with a transition effect that moves it from the bottom to the top. I have recorded my screen to demonstrate this behavior: . However, I now need the filter to hide from top to bottom instead, essenti ...

javascriptcssreactjsanimation

How can CSS image hover affect the layout of other elements on the page?

When I hover over the image and it grows to 350px, it causes everything around it to shift. The code is functioning as expected, but the issue arises when the enlarged image pushes nearby elements downward. Is there a way to prevent this behavior? #disp ...

htmlimagecsshover

What about a lightbox with enhanced jQuery features?

As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...

javascriptjqueryhtmlcss

Ensure child elements do not surpass parent size in HTML/CSS/Javascript without altering the children directly

I am intrigued by how iframes neatly encapsulate all site data within a frame and adjust it to fit the size. Is there any method to achieve this functionality in an HTML wrapper? Can the wrapper be configured so that regardless of the content, it is dis ...

javascripthtmlcss

HTML/CSS code for a header with elements centered across the full width of the screen

Having an outdated WordPress theme from 2010, I wanted to give it a modern touch by adding a sticky header. I found a plugin called myStickymenu that seemed to work well. However, my current theme's header has a fixed width of 960px and I desired to m ...

htmlcssheaderwidth

Achieving Centered Items with CSS Flexbox and Positioning

Struggling to arrange 3 elements using flexbox while keeping them centered both horizontally and vertically. Here is the desired layout: https://i.sstatic.net/Uo6WS.png This is my current attempt, but it's not working as expected. Can anyone spot t ...

htmlcssflexboxflexboxgrid

Reviewing code for a simple form and box using HTML5 and CSS3

I have developed a compact form as part of a larger webpage, proceeding step by step according to the specified requirements. I am wondering if there could have been a more efficient way to code this. Perhaps streamlining the code or utilizing different c ...

htmlcssoptimization

Conceal the content in order to determine the height of images displayed next to each

I am working on a layout where there are rows with images in the left column and text in the right column. The images have a ratio of 16:9. In case the text becomes too long, I would like to show only a portion of it with a gradient mask and provide a "Rea ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Initiate movement upon scrolling

I would like to activate this box animation once the user scrolls down by adding a class. I'm having trouble getting this to work, it seems like I might be missing something crucial. Here is my current code, can someone point out where I am going wro ...

javascriptjqueryhtmlcsssquarespace

Is the CSS property `backface-visibility` causing compatibility issues across different browsers with animations?

I have created a unique flip animation that displays new numbers resembling an analog clock or calendar with a hinge in the middle. The process is simple: using a div, I have: The bottom half of the first number on one side The top half of the second num ...

htmlcsscross-browsercss-animations

How come I am unable to upload my local image using angular-cli?

When testing my application on localhost, everything runs smoothly. However, once I publish the app to GitHub, the image fails to load. The image is located within the src/resources directory, and I have also attempted moving it to the public folder. My ...

htmlcssangularangular-cli

The wonders of CSS flexbox and the power of justify-content

I am working on a layout where I need three flex items (rows) in a flex container, and my requirement is to justify them as space-between... The first row will consist of cloud tags, the second will have a price, and the third will contain a Read more link ...

cssflexbox

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

I am currently working with the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans ...

javascripthtmljquerycssreactjs

Embedding CSS stylesheets in a Django template

I'm currently working on a large Django website and in the process of adding the HTML templates. Here is the file tree for the main part: C:. +---forums | | admin.py etc | | | +---migrations | | | ... | | | +---templa ...

pythonhtmlcssdjangodjango-templates

What could be the reason for the mouseleave event not functioning properly?

I have a JSFiddle that is working perfectly. Check out my Fiddle here. In my code, I am trying to make a div change colors when hovered over and then back to its original color when the mouse moves out. It works fine on JSFiddle but not locally. When I r ...

jqueryhtmlcss

Challenges with the grid layout on a responsive Wordpress portfolio site

I've encountered an issue with a Wordpress theme, as the portfolio grid doesn't appear to be extending fully across the page. You can observe the problem after the 'crashes' image box at this link - Any assistance in resolving this ma ...

htmlcsswordpressportfolio

Preventing right-aligned images from overflowing inside a div on Google Chrome

I am currently utilizing the jQuery cycle plugin to display a slideshow of images that floats to the right within an outer div element. The CSS I am using is as follows: .slideshow { float:right; margin-left: 20px; } The image alignment works per ...

jqueryhtmlcssimagecss-float