Adding font awesome in pseudo class not working

Question

I have searched and tried various solutions, but nothing is working for me. The font awesome is coming up fine in the page if using, for example:

<li><i class="fa-li fa fa-check-square"></i>List icons</li>

So, font awesome appears to be properly setup. But when attempting to implement into pseudo class, not working.

.accordion-title {
   background-color: #4d90fe;
   background-image: -webkit-linear-
   gradient(top,#4d90fe,#4787ed);
   background-image: linear-
   gradient(top,#4d90fe,#4787ed);
   border: 1px solid #3079ed;
   margin-bottom: -15px;
   padding: 15px;
   cursor: pointer;
   color: #fff;
   font-size: 1.2em;
   position: relative;
}

.accordion-title:before {
    font-family: FontAwesome;
    top:0;
    left:-5px;
    padding-right:10px;
    content: "\f0a9"; 
    position: absolute;
    color: black;
}

According to the plugin, the shortcode outputs code such as:

<div class="accordion">
<h3 class="accordion-title">Title of accordion item</h3>
<div class="accordion-content">
    Drop-down content goes here.
</div>
<h3 class="accordion-title">Second accordion item</h3>
<div class="accordion-content">
    Drop-down content goes here.
</div>

So, possibly something with "h3"? I have tried for more than an hour now. Any help appreciated.

Answer 1

What I think is your css is being overwritten by jquery-ui css Try debugging with inspect element, to find out. Try using !important or a parent class to give importance to your css rules