I would like to replace the upvote and downvote icons in my magazine. Adding these CSS rules with the developer tools of my browser does exactly what I want:

.fa-arrow-up:before
{

content: "any fontawesome glyph";

}

.fa-arrow-down:before
{

content: "any fontawesome brand glyph";

    font-family: Font Awesome\ 6 Brands;
    font-weight: 400;
}

However, when I add this to the CSS section of the Magazine panel, the " symbols get replaced with ", breaking the vote icons entirely. Are there any other ways to change the vote icons using the Magazine panel (preferably without using JS)?

  • artillect@kbin.social
    1·
    3 years ago

    There seems to be something wrong with the way that the CSS is getting parsed, if I add this rule:

    .fa-arrow-down:before
{
    content: "\f024";
    font-family: "Font Awesome\ 6 Free";
    font-weight: 900;
}

    It gets converted to this

    .fa-arrow-down:before {
    content: "
    \f024&quot: ;
    font-family: "
    Font Awesome\ 6 Free&quot: ;
    font-weight: 900;
}