Just changing the close 'x' color
The selector for the alert close is .alert-box>a.close so you can re-colour that at will using:.alert-box>a.close{ color: #aaaaff; }
Adding FA Icons in Pseudo Elements
Now, the cross is hard coded as a lowercase x so you can't change that without rewriting the HTML but with some tricky CSS we can do the job.
First we hide the alert box close 'x' that we don't want to see.
Then using the power of CSS pseudo elements we create a new element on the .alert-box class using the ::before pseudo selector.
We then have to do several things. Firstly, we need to position it as absolute and make sure it is in the same location as the original alert box close was.
We need to define the font-family as font awesome and give the pseudo some content - namely the font awesome icon we wish to use. This will involve using the unicode character codes for the icon you want as you can't enter the normal font awesome HTML.
Because we are dealing with the content of a pseudo element remember, so the normal way of defining font awesome uses an italic inline style on a div with the special .fa class. Since we don't have a div to operate upon we must use the unicode approach.
You can find all the font awesome unicodes on GitHub here.
Here is an extract of the cheatsheet with the fa-times-circle icon highlighted.
What you need are the characters including and following the letter 'f'.
So the code that we will enter in our pseudo content will be \f057
A word of warning
You can use this technique to add content to almost any element you like when you don't have access to change the source HTML easily.
In fact the Big White Duck billboard text logo on this site in the page header is done exactly in this manner. It is just a pseudo element (an image file in this case) added to the site title text. With a media query added to handle the responsive resizing you would never know that it was not part of the original page HTML code.
Please read up on CSS pseudo elements and absolute positioning before you attempt this on other elements. Do not blindly add code to any element on your page and expect it to work. This sort of technique would probably be classed as advanced CSS and should not be treated as a drop in snippet.
If you don't understand the code you are adding then don't add it. There are no quick fixes in life and there is no substitute for background knowledge.
So back to the alert box and here is the code we need.
.alert-box>a.close{
opacity:0;
z-index:11
}
.alert-box:after{
right: 0.25rem;
margin-top: -0.6875rem;
opacity: 1.0;
padding: 0 6px 4px;
position: absolute;
top: 50%;
z-index: 10;
font-family:"FontAwesome";
font-size: 1.375rem;
line-height: .9;
content:"\f057";
color: #ffffff;
}
Clear as mud?
...good. Have fun with your pseudo's.