Rails and html - style fontawesome in raw

Issue

I want to style the same icon with fontawesome, but differently in two places (different color in the menu and another on the main page)

I have icon "far fa-laugh-wink" in menu:

  <li class="nav-item">
    <%= link_to raw('<i class="far fa-laugh-wink"></i> funny'), posts_path, class: "nav-link" %>
  </li>

and on the main page:

<section class="jumbotron jumbotron-fluid" style="background-color: white; color: black; padding: 15px">
  <div class="jumbotron-body">
    <div class="container">
      <h1 style="color: black; font-weight: bold; font-family: Lato">
        <i class="far fa-laugh-wink"></i>
        funny
      </h1>
    </div>
  </div>
</section>

and styles.css.scss.rb

i.far.fa-laugh-wink{
background: linear-gradient(to right, #67b26f, #4ca2cd); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

In the menu I want have icon laugh wink with color: rgba(0, 0, 0, 0.5); but when I add style="color: color: rgba(0, 0, 0, 0.5); !important"its have 2 colors :/

Solution

As I understand you just want to have one icone in few different colours, here is sample and please check for correct names of your icons and version of awesome font. //this is what you need to put into styles.scss as example;

.red_colour{
  color:rgba(0, 0, 0, 0.5);
}
.blue_colour{
  color:rgba(1C,07,DF 0.5);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<div>

<i class="far fa-laugh-wink"  style="color:blue;"></i>
<i class="far fa-laugh-wink blue_colour" ></i>
<i class="far fa-laugh-wink red_colour"  ></i>
</div>

Answered By - Nezir