How to style up and down arrow

[newcoder1010]

Hello, 

I have FAQ section where questions and answers are collapsible and expandable.

I have this css to put an up and down error next to question. I can see the arrow just fine on laptop. I also see it when I inspect in chrome. But when I see it in mobile phone, arrow gets changed to square or different look. If I change the font-family, I do not see arrow any more. Instead, I see different icons depending on the font family. So how can I fix the css so it will show up and down arrow in each device?

.accordion-section .panel-default .panel-title a:after {
    font-family: 'FontAwesome';
    font-style: normal;
    font-size: 3rem;
    content: "\f106";
    color: #1f7de2;
    float: right;
    margin-top: -12px;
}

Thanks!

[JMRKER]

It would be a lot easier to help if you include the HTML with your CSS
to determine what interactions would suit your problem best.

Without seeing anything but the CSS above
my first area to check would be the 'margin-top: -12px;' statement.

[Steven1]

The problem is with the content "\f106" try using a CSS created arrow instead then you will be sure it will show up on all devices.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_arrows