Awsome font title icons not responsive

  • Resolved PenPeg

    (@penpeg)


    8 years, 9 months ago

    Really like this plugin.
    I’ve added icons before the titles using FontAwesome and the following CSS:
    .accordion-title {
    border-top: 1px solid #92c51a;
    padding: 0.6rem 0 0;
    cursor:pointer;
    }
    h5.accordion-title {
    color: #666 !important;
    font-size:0.95rem;
    font-weight:bold;
    }
    .accordion-title:before {
    font-family: FontAwesome;
    color: #92c51a;
    content: “\f055”;
    margin-right:1rem;
    }
    .accordion-title.open:before {
    color: #FFA500;
    content: “\f056”;
    }

    Works perfectly on desktop but not on other supports (Safari).
    How can I make the “before” icons responsive?
    Thanks
    https://www.lesbenines.org/faq/

    https://www.ads-software.com/plugins/accordion-shortcodes/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author philbuchanan

    (@philbuchanan)

    It looks like none of the site is actually responsive. I’m not sure I can be of much help in this case.

    Hi PenPeg, if you’re looking for something simple just to provide a visual clue that the accordion is open or closed, you could try adding character entities which are visible on most browsers.

    There’s a whole host of them here – https://brajeshwar.github.io/entities/

    For CSS purposes, I use “\25b2” and “\25bc” which provides up and down black triangles. It’s simple but gets the point across. Best of all, it works on mobile browsers.

    Thread Starter PenPeg

    (@penpeg)

    Thanks bazzajunior, thats kind of you to mention it. I’ll use the unicode symbols in the meantime, but I’m still looking for a solution to the Awesome question. I’ve been using another accordion plugin “master-paper-collapse-toggle” and the Awesome icons work on mobiles with that one. Don’t know why they don’t work with “Accordion Shortcodes”.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Awsome font title icons not responsive’ is closed to new replies.