Using CSS to create sleek all-black Flaticons

After trying various solutions, I am still unable to fix this issue. I downloaded some icons and in the demo, they all appear as they should, with a more colorful aesthetic.

Here is what the icons should look like:

However, this is how the icons actually appear for me:

Currently, I only see the outline of the icon, even though I am using the default CSS. The font icon outline is visible, but the icons themselves are black. Can anyone assist me in resolving this and restoring the color to the icons?

Thank you in advance for your help!

Answer №1

If you're looking to incorporate multiple colors into your icons, CSS Icon fonts may not be the best option as they only support a single solid color. Consider using SVG icons as an alternative solution.

Answer №2

Recently, I encountered a similar issue myself where the page showed black in the demo file included with the download. It appears to be related to the use of fonts.

After downloading the SVG sprites version, I found that the demo file looked the same and when I imported the SVGs, they were also displaying as black.

Upon further investigation on the flaticon website, I discovered that there is an option to "paint" a collection before downloading, which applies a solid color to all objects. This results in the SVG code listing the fills as "null."

To resolve the issue, I downloaded the icons individually and found that they displayed correctly. It seems that there may be an issue with their collection download feature.

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

How do I stop Bootstrap from taking over my custom navbar design?

My website's navbar stopped working after adding Bootstrap to my HTML pages. I suspect that Bootstrap is overriding my custom CSS. Here is the code for my navbar: .navbar { overflow: hidden; !important; background-color: #333; !important; } .. ...

html css bootstrap-4 thymeleaf navbar

Is it advisable to set the html root at 62.5% when using rem units in CSS? Does this imply that the default font size of browsers is 16px?

During a discussion with a group, I mentioned the 62.5% trick for scalability (setting 62.5% as font size in root and using rem units throughout CSS for easier scalability when users change default browser font size) and their arguments were as follows: " ...

html css responsive-design

What could be causing the server to return an empty response to an ajax HTTP POST request?

Attempting to make a POST request using ajax in the following manner: $.ajax({ type: "POST", url: 'http://192.168.1.140/', data: "{}", dataType: "json", ...

javascript html jquery ajax

Navigate between pictures using hover in jQuery

I am working on creating a feature where images cycle through individually every 2 seconds, but switch to the right image when its associated link is hovered. So far, I have managed to make the images show up on hover, but I am struggling with getting them ...

javascript jquery css

Display text with ellipsis on one of the two spans within a container

I'm struggling with implementing ellipsis in my HTML code. Here's what I have: <div id="wrapper"> <span id="firstText">This text should be displayed with an ellipsis</span> <span id="lastText">this text should not ...

html css

Problem with CSS layout on Internet Explorer 9

I've encountered some layout difficulties in IE9 and I'm struggling to identify the root of the problem. Even though I'm using Foundation 5, I don't believe that's the issue. The content is within a Foundation grid set at large-12 ...

html css internet-explorer

When I hover over my divs, my span is positioned behind them

Greetings, I apologize for any language barriers. I will do my best to articulate my issue clearly. I have experimented with various approaches and reviewed similar questions, but unfortunately, I am unable to resolve the problem... I have created a title ...

css hover

Deleting an element from an array stored in local storage with the help of jQuery

Summary: Developing a front-end wish list feature Tech Stack: Utilizing HTML5 (localStorage), CSS, and jQuery Key Features: Ability to add and delete items dynamically with real-time count display Challenge: Issue encountered when trying to remove added ...

javascript jquery css html local-storage

Transforming a radio button into a checkbox while successfully saving data to a database (toggling between checked and unchecked)

I have limited experience in web development, but I recently created a webpage that allows users to input data into an SQL database. While my code is functional, I believe there's room for optimization. I pieced it together from various online resourc ...

javascript php html

Populate List Items until Maximum Capacity is Reached and Increase the

Is there a way to make a ListItem fill the list vertically while also being able to overflow it if needed? I'm looking for a solution that would allow me to access the height of the empty space in the list, which I believe would be the minHeight. Som ...

javascript css reactjs typescript material-ui

Is the Data Being Saved: Verifying if the Value Has Been Altered?

Imagine your form containing numerous fields, where typically only 1 or 2 are modified and require saving. What approach do you take? Update the database with all values, regardless of any changes. Utilize form states to post back only the changed values ...

php html database forms save

Swapping out for <br />

I am currently working on a feature that allows users to enter text into a textarea and send it as the body of an email. The challenge I am facing is automatically adding new lines when users press enter in the textarea. The mailing functionality works, b ...

php html forms

Tips for Passing On Parent tabindex Value to Children

Is there a way to propagate a parent's tabindex value to all of its children without individually setting tabindex for each child? Here is an example code snippet: <div id="app"> <div tabindex="2" class="parent-sec ...

html angular accessibility tabindex

Establish a comprehensive background for your Angular project

I've been struggling to figure out how to set a background image for my entire angular project. I've tried using global css and the app.component.css file, but it only sets the background for the component area. Here is a snippet from my global ...

css angular background-image

Refresh tab URLs for dynamic tabs with jQuery UI

Utilizing jQuery UI dynamic tabs in my application requires updating the URL hash value when a user clicks on a tab. After researching solutions on SO, like link1 and link2, I attempted the following approach: Javascript: $( "#tabs" ).tabs({ select ...

jquery html jquery-ui

What is the best way to securely transfer data from a Node/Express server to the client using JavaScript, ensuring sanitized HTML and preventing cross-site scripting (X

What is the best method to securely pass data from an Express backend to a client-side JavaScript in order to render it in the DOM using client-side rendering, while also allowing sanitized whitelist HTML and preventing XSS attacks? For example, if the No ...

javascript html express xss html-sanitizing

CSSer Q&A