-1

I am using an i class=fa-arrow-circle-left

On one of my pages it is green (how I want). On another page it is black. I'm guessing something is getting overriden for the color. What am I missing?

I looked through the SO articles such as: Can I change the color of Font Awesome's icon color?

How I'd like it to look(green): Green

How it looks(black): Black

aspx file with black: (note that this did not have inline styling, that is just something I tried in hopes of making it green, but it still shows up as black)

  <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="notworking.aspx.cs" Inherits="project.folder.file" %>


<p><i class="fa fa-arrow-circle-left" {color: green}></i><a href=""> Member Summary</a></p>

aspx file with green:

 <p><asp:LinkButton ID="lnkButtonBackToSearch" runat="server" OnClick="lnkButtonBackToSearch_Click" Visible="false"><i class="fa fa-arrow-circle-left"></i> Back To Search</asp:LinkButton></p>

I also looked at the css file but the only thing I see with black is:

body {
color: #000000;
seesharp
  • 101
  • 1
  • 14
  • Your problem seems to be related to HTML and CSS and I might be able to help, but I don't know aspx. Could you specify what `` gets parsed into (markup wise)? – tao Sep 24 '18 at 20:56
  • Why not define your style rule in your CSS file? `.fa-arrow-circle-left{ color: green; }` – Saltz Sep 24 '18 at 20:57
  • @Saltz probably because they want it to have different colors on different pages? – tao Sep 24 '18 at 20:57
  • @AndreiGheorghiu In the question he refers to wanting it green on multiple places. Why inline style all HTML attributes if you could do it once? – Saltz Sep 24 '18 at 20:59
  • @Saltz, I see your point. It still makes me wonder why one page has it as green even though I didn't set it inline as green. The page I set it inline as green, is showing as black – seesharp Sep 24 '18 at 21:01
  • @seesharp You could check using the browser inspect tool if the color property is inherited from another rule made by for example a template framework as bootstrap. – Saltz Sep 24 '18 at 21:04
  • `{color:green}` inside an HTML element is invalid markup. Unless aspx automatically changes it to valid markup, that's not going to do anything. To apply specific styles to a particular element, you could use the `style` attribute: `style="color: green;"`, though you should first read up on the importance of not having inline style rules in your code. – tao Sep 24 '18 at 21:17

1 Answers1

0

After looking trough your submitted pictures and code examples I found the problem.

You probably have a styling rule made for your HTML elements that your icon inherits due to its position inside the p element. For the code example where the color is not green. Is due to a fault in the syntax for inline css. It should be done as follow:

<p><i class="fa fa-arrow-circle-left" style="color:green;"></i><a href=""> Member Summary</a></p>
Saltz
  • 413
  • 5
  • 18