Having trouble locating the code for adding a hover effect to the FontAwesome icon

In regards to my portfolio located here: My Portfolio

When hovering over the "Marketing Automation" section, a small fa fa-tablet icon appears to the left which turns blue when hovered over. I would like for this icon to remain white, rather than changing to blue. All of the fa icons on the page behave in this manner. I attempted to remove all CSS to troubleshoot, but the hover effect persisted.

I have searched extensively for the source of this hover effect, but have been unsuccessful. Can anyone identify where this is coming from using the inspector window?

<div class="col-xs-12 col-sm-6 col-md-4">
            <div class="service small">
                <i class="fa fa-tablet"></i>
                <a href="artikler/marketing-automation.php"><h3 class="kompetenceLinks">Marketing Automation</h3></a>
                <p>
                     An extremely powerful yet often overlooked tool that <i>will </i>create an automated and personalized 
                     customer relationship, ultimately leading to increased sales potential.

                </p>
            </div>
        </div>
htmlcss

Answer №1

If you're looking to customize the theme_color.css file, specifically in line 40, you will need to make the following adjustment:

.services .service:hover .fa, 
.popular-posts li a:hover .fa, 
.sidebar .social li a:hover, 
.block-thumbnail .block-data h3 a:hover {
    color: #09F;
}

Simply change the color code to #FFF, or you can choose to override it in a different file. This should resolve the issue you're experiencing!

Answer №2

It seems like the issue might be originating from your personalized CSS. When I applied this code to my own, I did not encounter the problem. The underline appears only on the link, not the icon. I recommend checking your "a" style for any potential issues.

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

Images featuring a drop-down menu

I'm having trouble separating the two photos on this page. When I hover over one, the other also fades in. Additionally, the text box is overlapping the first photo. My goal is to have a total of 6 photos on the page, each with a dropdown list contain ...

html

Challenges with formatting the <legend> tag and grid setup in bootstrap 4

My intention was for it to be displayed like this: But unfortunately, it is appearing like this instead: You can see that the word "fruit" is misaligned. I am currently using Bootstrap 4 alpha v6. Here is the code snippet: <fieldset class="form- ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Ways to display success message following JavaScript validation

I've been working on creating a form that displays a success message after JavaScript validation checks are successful. To show the success message, I'm utilizing Bootstrap alert. I split my code into two files - one for common validation functio ...

javascripthtmlcssvalidation

Animating the process of eliminating a background image

I am working on a project with a div that has a background-image. The goal is to make the image fade away when a button is clicked, and then fade in again when another button is pressed. The focus is on only fading the background image while keeping the co ...

jqueryhtmlcssanimationjquery-animate

Separate the business logic from the HTML code in Angular to prevent repetition and make the code

I have a lengthy HTML code with ngSwitch for 3 cases and 4 small cases within the default case, all using the same icon structure. How can I shorten my HTML code and eliminate business logic from it? The hierarchy to display different icons is: Servicefl ...

htmlangularredundancy

Guide to creating a dynamic illumination using CSS, HTML, and JS

Can you help me create a unique lighting effect for a specific section of my webpage? I'm curious about the techniques needed to achieve a similar effect as seen on another webpage. Is it feasible to create this effect using only CSS and HTML, or are ...

htmlcsslighting

What is the method for adding a dark, semi-transparent overlay across the entire webpage?

Is it possible to overlay the entire webpage with a 50% opaque black div? I attempted to achieve this by creating a fixed position div at the top of the script with 100% width and height and a z-index of 1. However, this method prevents me from placing an ...

htmlcss

"Is it possible to keep an eye on two different events and take action once they both

I have a menu with different submenus for each list item, all utilizing the same background tag. Currently, when one submenu is open and I hover over another list item, the previous submenus hide and the new one opens. What I want is for the content to cha ...

javascriptjqueryhtmlcss

Display additional tiles within a compact container

I'm attempting to replicate the user interface used by foursquare! Positioning the map slightly off center like they have . I've figured out how to do one part but struggling with the second part. Initially, I loaded the map in a small div (t ...

javascriptcssleaflet

What is the best way to include CSS code in the output display?

I'm looking to customize the appearance of my table rows and cells. Specifically, I want the cell file name, size, etc., to be colored blue while each row should have a different color on hover. I've attempted to achieve this using CSS and variou ...

phphtmlcssdatabaseecho

Struggling to eliminate the scrollbar on a Material UI Dialog

I have a modal window that includes a keyboard, but I'm encountering some issues. Despite adding overflow:'hidden' as inline CSS, the scrollbar refuses to disappear. Furthermore, even when utilizing container-full padding-0 in Bootstrap, th ...

javascriptcssreactjsmaterial-ui

Tips for utilizing flexbox and React-Native to ensure a cropped image takes up the entire View

I'm trying to create a cropped image that fills the entire screen in my app. Currently, my code looks like this: https://i.stack.imgur.com/9DtAc.png However, I want the small square of Homer eating donuts to occupy the entire screen, similar to the ...

javascriptcssreact-nativeflexboxreact-native-flexbox

Creating an HTML dynamic table with fixed height to prevent expanding when adding text

I have a dynamic table with fixed width and height. By using a random function, I determine the number of cells (ranging from 3x3 to 7x7) in the table. The table renders correctly, but when clicking on a cell to write a letter, the row expands in height. H ...

htmlcss

Guide on transferring three js variable to an HTML label element

For my project, I am looking to pass three js values to the label of a div. The desired output is: stWay: stProposer: stTime: hello John 2017-09-07 I have successfully programmed a button to make div1 a ...

javascriptjqueryhtmlcss

Creating an element that remains in a fixed position in relation to its parent container, rather than the entire screen - here's how

Encountering an issue where, upon user scrolling down, a portion of the sidebar becomes fixed in position. However, when attempting to apply CSS for fixing the sidebar element, it ends up fixed to the entire screen instead of just within its parent contain ...

css

dragging and dropping files for easy upload

Here is a challenge I am facing: I am looking for a solution that allows users to drag multiple images from their local file system onto the flash/flex/html5 app. The app should then extract the file name details and communicate with the server. Once t ...

flashapache-flexhtmlfile-upload

Issue with launching Android application from website

I am looking to add a feature to my Android app that will open the app when a specific link (for example, www.example.org) is visited in the web browser. I have been experimenting with intent filters, but haven't had much success so far. Although I h ...

javaandroidhtmlandroid-intentweb

Ways to format the initial letter of a word as BOLD

Looking to make the first letter of certain words bold on a button in my UI that says, "Active Engagement" and "Active Non-Engagement". How can this be achieved? For example: Active Engagement, Active Non-Engagement The code for the buttons is as follows ...

androidhtmlbutton

Troubleshooting issue with applying hover effect to child divs

How come when I hover over one of the child items in my parentDiv, the background of the last childDiv changes no matter which child I place my mouse on? for (let i = 0; i < Number(height); i++) { for (let j = 0; j < Number(width); j++ ...

javascripthtmlcsstypescript

Is it normal that my website isn't scrollable on an iPhone?

I have a hunch that the issue is related to the CSS, or perhaps it could be due to including the parallax JavaScript library. You can view the site at Below is the SASS code snippet: @import "compass/css3"; /* Sticky footer styles ---------------------- ...

ioscsscoffeescriptsassparallax