Slash in Custom CSS not saving

  • Resolved Tharkon

    (@tharkon)


    4 years, 1 month ago

    When posting a slash in the Custom CSS, for example in this code:

    i.fa.fa-angle-left:before {
    content: "\2B9C";
    font-style: normal;
}

    The slash is not saved, so I thought maybe I need to escape it placing an extra slash before it and that seems to work. But every time the settings in the plug-in get saved regardless of if anything changed, one of the slashes gets lost. This happens even if unrelated to CSS and the CSS is not even visible so you can be caught quite off-guard by it.

    I managed to work around this issue in my case by simply putting in ? instead of \2B9C (I didn’t know that would be allowed as well), but that doesn’t mean the issue no longer exists.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author ShapedPlugin LLC

    (@shapedplugin)

    Hi @tharkon,

    Apologies for the late reply. The WordPress Carousel plugin used Font Awesome Icon for the left and right arrows. You must have to use the FontAwesoem Icon Unicode to do any changes to the Icon.

    However, we tried to visit the page link you shared. Unfortunately, it is showing the site can’t be reached. Please contact us at the forum so that we can help you in a better way.

    Thank you very much!

    Thread Starter Tharkon

    (@tharkon)

    I didn’t mean to share the page as a link, it’s only a relative path within the admin section. I could prepend a domain name, but it wouldn’t work without an admin account on the website.

    A little extra detail:
    I disabled font awesome on the first tab, Advanced Settings.
    I did this to reduce loading times because we make very little use of font awesome and because I expected to be able to manually add a Unicode replacement for the few places I did need special icons.
    Then under Custom CSS I added the CSS I posted, because to my understanding, the only place where Font Awesome is used in WP Carousel is for the left and right icons. And this CSS code shows arrows even when Font Awesome is not loaded.

    I should also note that I replaced ? with ? because the former would not display properly on Android.

    So to summarize, my current code works:

    i.fa.fa-angle-left:before {
    content: "?";
    font-style: normal;
}

i.fa.fa-angle-right:before {
    content: "?";
    font-style: normal;
}

    But if I were to use Unicode code points instead of the actual characters themselves, as is the normal practice in CSS, I have to escape the slashes, which is in itself not a problem, but I have to re-escape them every time I would visit the page, which is somewhat unexpected behavior.

    i.fa.fa-angle-left:before {
    content: "\\276E";
    font-style: normal;
}

i.fa.fa-angle-right:before {
    content: "\\276F";
    font-style: normal;
}

    I hope that explains everything. Again, I have already worked around the issue on my website, so feel free to consider this as low priority. Or perhaps all that is needed is a disclaimer on the Custom CSS settings page explaining not to use slashes.

    • This reply was modified 4 years, 1 month ago by Tharkon.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Slash in Custom CSS not saving’ is closed to new replies.