Jump to content

How to style up and down arrow

Recommended Posts


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;


Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...