How can I change the color of one portion of a font icon?-CodePudding

I am implementing upvote button using fa fa signs and I was trying to color background of up vote button but the color is showing outside of the sign (which I think is the padding of icon), And i am trying to hide the outer padding. so the color will only be inside the upvote sign

<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />
<i  class="fal voteup fa-sort-up fa-4x"></i>

.voteup {
  background-color : red;
}

<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />
<i  class="fal voteup fa-sort-up fa-4x"></i>

I have also tried by adding padding: none; but it is still showing.

Any help would be much Appreciated.

CodePudding user response：

If you want to keep the black outline, you can use two icons (solid regular) on top of each other:

#outline {
  position: absolute;
  z-index: 2;
}

#background {
  color: red;
  position: relative;
  z-index: 1;
}

<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />
<i  class="fal voteup fa-sort-up fa-4x" id="outline"></i>
<i  class="fas voteup fa-sort-up fa-4x" id="background"></i>

Notice the order of HTML elements and z-index.

CodePudding user response：

You can't do this with a font, unfortunately - standard font files don't support multicolour fonts. (There is a new format that does, but it's not widely supported and Fontawesome isn't available that way in any case.)

If you want arrows that have an outer border in one colour and a fill in a different colour, you'll have to use an image. An SVG would probably be best (because vector graphics scale) and you can download the Fontawesome symbols as SVG files. You could then open the arrows in a graphics package like Inkscape and add your custom fill.

If you just want a solid arrow, you can use the Fontawesome solid variant. To do this, replace your fal class with fas.

CodePudding user response：

You can apply the properties of the filled icon character via CSS. This has the nice advantage of requiring no additional markup.

.voteup {
  position: relative; /* allow absolute positioning of children */
}

.voteup:after {
  content: "\f0de"; /* set the character code */
  font-weight: 900; /* set the character variant */
  color: red;
  position: absolute; /* position with respect to the parent */
  left: 0;
  z-index: -1; /* since :before is in use, we'll use this and lay it behind */
}

<link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" type="text/css" />
<i class="fal voteup fa-sort-up fa-4x"></i>