We Keep Coding

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

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.

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.

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.

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>

How to change w3.css button's own color?

<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<div class="w3-bar w3-red">
<a class="w3-bar-item w3-button w3-hover-blue">Button</a>
</div>
I want to make that if you click on it, it changes its own color. And if you click it again, it changes to the original color. (see the hover) I don't know how to do, because it's a class, and the color is in the bar.

You can try this:
var IsCustomBG=false;
$(".w3-button").click(function(){
if(IsCustomBG==false){
$(this).css("background-color","red");
IsCustomBG=true;
}
else{
$(this).css("background-color","");
IsCustomBG=false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<div class="w3-bar w3-red">
<a class="w3-bar-item w3-button w3-hover-blue">Button</a>
</div>

You can add/remove class on click of button.
$(".w3-bar-item").on("click",function(){
if($(this).hasClass('color')){
$(this).removeClass('color');
}
else{
$(this).addClass('color');
}
});
.color{
color:green !important;
background-color:yellow !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<div class="w3-bar w3-red">
<a class="w3-bar-item w3-button w3-hover-blue">Button</a>
</div>

You can simply create a class and toggle the class on click. This approach is useful when you want to add some other css properties in future for same operation.
$(".w3-button").click(function(){
$(this).toggleClass('redCls');
});
.redCls{
background-color:red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<div class="w3-bar w3-red">
<a class="w3-bar-item w3-button w3-hover-blue">Button</a>
</div>

#check{
display: none;
}
label[for=check]{
padding: 5px 10px;
background-color: skyblue;
cursor: pointer;
color: white;
}
#check:checked + label{
background-color: pink;
}
<input type="checkbox" id="check" />
<label for="check">button</label>
If you want to change button's color when you click, I think you should use checkbox trick. but it's not correct answer. It's just trick.

Store the original value of the "button" and toggle between that and a custom color on click.
var button = document.getElementsByTagName('a')[0];
var color = button.style.backgroundColor;
button.addEventListener('click', function(){
this.style.backgroundColor = this.style.backgroundColor === color ? '#BADA55' : color;
});
<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
<div class="w3-bar w3-red">
<a class="w3-bar-item w3-button w3-hover-blue">Button</a>
</div>

Do this, add an ID to the link, best would be to not use CSS frameworks like these at all.
var theLink = document.querySelector("#fkbtn");
theLink.addEventListener("click", function() {
this.className = ('clicked');
});
In the Css, you need this:
.clicked{ background:black; !important;}
With frameworks, things get messy, you need the !important to override stuff, just a huge mess, the above removes all other classes and thus, the dimensions, but your link color will change.

Onclick div only works for one user

I am using this code on my forum postbit. I am trying to have a div element reveal some text for each user but I can only get it working for the first user.
The other divs are always open. I am not sure where I'm going wrong with it.
function toggleDiv(id) {
$("#" + myContent).toggle();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:toggleDiv('myContent');">
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
Reveal text here.
</div>

Don't you mean $("#" + id).toggle(); ?
If you look at the console, you will see an error message saying that myContent is undefined.
You cannot concatenate a String ('#') with an undefined variable in JavaScript.
function toggleDiv(id) {
$("#" + id).toggle();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:toggleDiv('myContent');">
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
Reveal text here.
</div>

A couple of changes here:
Add the jQuery source. Add this script tag above your script tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: it appears Mr. Polywhirl has added this to your sample.
Utilize the id parameter in function toggleDiv()
i.e. $("#"+id).toggle();, unless myContent is defined elsewhere, it will be undefined so $("#" + myContent).toggle(); will cause an error.
To have the content initially hidden, add the style display: none.
Remove the fadeIn class name initially and add it after toggling the element using .toggleClass().
See the updated example below.
As far as when to show the message for the first user, we need to know what your business logic is for that concept. Can you tell what the pid (or uid, given this list of fields in their API for posts) value is of the first user, perhaps based on a given list of posts in MyBB? You mention that this code is at the top of the page: <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>. So if you knew a certain pid value (e.g. 1337) you could conditionally add the code to add the message to the DOM - e.g.
$html = '';
if ($post['pid'] == 1337) {
$html .= '<a href="javascript:toggleDiv(\'myContent\');">';
}
//add $html to the rest of the HTML outputted to the page
function toggleDiv(id) {
$("#" + id).toggle().toggleClass('fadeIn');
}
.animated {
opacity: 0;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
.fadeIn {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
<div class="animated" id="myContent" style="padding: 10px; display: none">
reveal text here
</div>

Your function takes a parameter id, but you're using myContent i the body of the function. Like this it works:
function toggleDiv(id) {
$("#"+id).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw">icon here</i>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
reveal text here
</div>

You are using myContent instead of id inside the function, replace that and it should work:
function toggleDiv(id) {
$("#" + id).toggle();
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:toggleDiv('myContent');">
<i style="color: #000; font-size: 13px;" class="fa fa-chevron-down fa-fw"></i>
</a>
<div class="animated fadeIn" id="myContent" style="padding: 10px;">
Reveal text here.
</div>

To close a menu I need to change the direction of a button

My menu is sliding from right to left on click.
There is an arrow button to open the menu.
To close the menu I need to change the direction of that button.
Please help me with this.
HTML
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="fa fa-home"></i>Home
<i class="fa fa-diamond"></i>My Wedding
Venue List
About
Contact
</div>
<!-- Menu button -->
<div id="menuToggle" class=""><i class="fa fa-angle-left"></i></div>
</nav>
JavaScript
(function () {
// Menu settings
$('#menuToggle, .menu-close').on('click', function () {
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
})(jQuery);

You can add the class of the fontawesome icons rotation .fa-rotate-180 adding this line inside your on click function
$('#menuToggle').find($(".fa")).toggleClass('fa-rotate-180');
You can also add a rotate effect with the css animation
#menuToggle i{
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
transition: all 500ms linear;
}

Show loading spinner before Bootstrap Carousel Load

I'm trying to show a spinner before a carousel loads and also when you click left and right controls of the carousel. Currently I'm able to show a spinner before page load using the following code..
//HTML code
<script src="js/jquery-1.11.3.min.js"></script>
code just after body tag
<div id="loader">
</div>
//CSS code..
#loader{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
}
//JS code..
$(window).load(function(){
$("#loader").delay(1000).hide(0).fadeOut("slow");
});
Using the above logic now I'm trying to display a spinner of smaller size and transparent background every time user clicks the left/right controls of the bootstrap using the below code..
HTML code..
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="next"-->
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="carousel_spinner">
</div>
CSS code...
#carousel_spinner{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:50%;
height:50%;
background:url(../images/loader.gif) 50% 50% no-repeat;
}
JS code..
function loadNextSlide(){
$("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
}
The above code shows a small spinner on the top left side on page load and when I click on the right control of carousel no spinner is shown.. Can't understand where I'm going wrong..Please help..

Bootstrap Doc:
According to bootstrap documentation Carousel offers following events:
slide.bs.carousel
Occurs when the carousel is about to slide from one item to another
slid.bs.carousel
Occurs when the carousel has finished sliding from one item to another
What you need:
is to put your spinner code inside:
$("#carouselObject").on('slide.bs.carousel', function () {
//show spinner here
});
And then hide that spinner code in slid event:
$("#carouselObject").on('slid.bs.carousel', function () {
//hide the spinner here
$("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
});
P.S: The above code is not tested but it will take you where you are heading