Swap out symbols for pictures

To display the 3 icons, I am using https://boxicons.com/. You can find the code here.

Additionally, I would like to download the icons and store them in a folder. Here is the result with uploaded images: https://i.sstatic.net/Qsu9k.png

I encountered two issues:

  1. The white color has been replaced with black.
  2. A horizontal line below the image disappeared.

Do you know how I could achieve the same appearance as shown in the initial illustration?

I made a change from this:

<a href="#" class="form__login-icon"><i class='bx bx-book-content'></i></a>...

to this:

<a href="#" class="form__login-icon"><img src="https://zupimages.net/up/22/33/qad0.png" alt="image"></a>...

Thank you!

css

Answer №1

If the image you are working with has a black foreground, try using the code 

.form__login-icon img { filter: invert(1); }
to turn the foreground white. For the horizontal line effect, utilize box-shadow: 0 2px #000;. Alternatively, consider using an SVG image and adjusting the fill color as needed.

Answer №2

The issue lies within the images themselves, as they contain a black background despite being in PNG format. To rectify this, consider utilizing online tools, Adobe Illustrator, or Photoshop to eliminate the background from said images. Alternatively, incorporating images in SVG format may provide a solution.

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

Automate CSS slideshow playback using JavaScript

Using only CSS, I created a basic slideshow where the margin of the element changes upon radio button click to display the desired slide. You can view the functionality in the code snippet below. Additionally, I implemented auto play for this slideshow usi ...

javascriptjqueryhtmlcssfunction

The full extent of the background color is not reaching 100% of the height

My content wrapper has a height set to 100%, but the issue is that the background color doesn't fully extend across all content. Here are some images and my code for reference. Any assistance would be greatly appreciated! You can see the white space a ...

htmlcssheightbackground-color

An issue is being caused by altering the custom.scss.css file in Rails

After following the tutorial by Michael Hartl (), I encountered an issue when trying to modify some CSS functions in the custom.scss.css stylesheet. Every time I make a change, such as adjusting the margin from 10 px to 11 px, I receive this error in my br ...

cssruby-on-railstwitter-bootstrap

Difficulty achieving transformation of one div element within another div element

My aim is to create a unique hover effect for a button where it tilts slightly without affecting the text. You can view my progress here: https://codepen.io/kyannashanice/pen/QWveOMg I tried stacking the text and button in separate divs and triggering the ...

htmlcsstransform

How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Thank you for helping me out here. I'm currently working with ReactJS and facing a challenge where I need to change the background of a div from a color to a specific image URL upon clicking a button in a modal. Despite my efforts, I keep encountering ...

javascripthtmlcssreactjsbackground

Tips for correctly linking JS and CSS resources in Node.js/Express

I have a JavaScript file and a stylesheet that I am trying to link in order to use a cipher website that I created. Here is my File Path: website/ (contains app.js/html files and package json) website/public/css (contains CSS files) website/public/scri ...

javascripthtmlcssnode.jsexpress

Position a Paper component in the center of a div

I'm having trouble centering my <Paper> element inside a div. Can anyone help me with this? I have placed both the <Paper> and <RaisedButton> elements inside the div and applied the following CSS: .timerArea { text-align: center; ...

cssreactjsmaterial-ui

Adjusting font size to perfectly fit within its confines

When using v-for to map out objects from an array into cards, it's important to keep the height consistent throughout the section. Manually adjusting text size with @media queries can be tedious and inelegant, requiring multiple rules for different sc ...

cssvue.js

The header one tag does not wrap around content when the window size is adjusted; instead, it

I have been struggling to position my page title in the center of the header image both horizontally and vertically on my portfolio pages. I managed to get the h1 title where I want it but now I need to make it larger. The issue arises when I resize the wi ...

phphtmlcssword-wrap

Changing the color of the selected item in a Jquery Mobile ListView

I have a dynamic list that triggers a JavaScript function using the onclick event. However, I am struggling to change the color of the selected item in the list. Here is an example of the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

htmlcssjquery-mobile

consistent height across the div when expanding

There is a recurring issue I encounter where it takes too long for me to solve the problem. My goal is to ensure that the bootstrap boxes at the bottom of the page have the same height. I attempted to set a fixed height in pixels using my CSS, but this cau ...

htmlcsstwitter-bootstrap

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

javascripthtmlcssdeployment

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

Interact with HTML style attribute using JavaScript

Is there a way to retrieve a specific CSS property from the style attribute of an HTML element, without considering the stylesheet or computed properties? For example: <div style="float:right"></div> function fetchStyleValue(element, propert ...

javascriptjqueryhtmlcss

When hovering over nav bar links, shadows are not displayed

When hovering over the navbar links, I am able to change their color but a shadow at the bottom is missing. Is there a way to add a shadow at the bottom like it had before when not hovered? Visit this link for more information ...

htmlcss

What is the process for changing the output paper size to A4 in React Native (expo android)?

Using React Native to develop an Android app for billing purposes, I encountered an issue with the output paper size being 216mmX279mm instead of the standard PDF size of 210mmX297mm. Utilizing expo-print and printToFileAsync from expo, I aim to achieve a ...

javascriptandroidhtmlcssreact-native

What is the best way to implement a seamless left-to-right sliding effect for my side navigation using CSS and Javascript?

I am currently working on creating a CSS and JavaScript side navigation. Below is the code that I have implemented so far: var nav = document.getElementById('nav'); function show(){ nav.style.display = "block"; } .side-nav{ background-color:bl ...

javascripthtmlcss

The onclick function in the Navbar div fails to work for inner elements

Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...

javascriptjqueryhtmlcss

Creating flexible items with a 1:1 ratio and ensuring that the padding on the left and right of the flex container remains consistent

Whenever I adjust the size of the window, https://i.sstatic.net/Fm3d1.png the flex-container ends up with uneven padding on the left and right, which is less than ideal. So, I am looking for a way to allow the flex-item to resize when the window size c ...

javascripthtmlcssreactjsflexbox

Surprising results when a class is applied using jQuery

Exploring the differences between two fiddles (make sure to run the code on the jsfiddle pages to see the differences clearly). First Fiddle Simple demonstration: $("body").addClass("noScroll"); alert($("body").hasClass("noScroll")); $("body").removeCla ...

javascriptjqueryhtmlcss