Numbering interferes with fontawesome icon CSS
Numbering interferes with fontawesome icon CSS
I'd like to @import some fonts, but Checkvist's custom CSS is loaded inside @media screen.
I'd like to @import some fonts, but Checkvist's custom CSS is loaded inside @media screen. @import rules must precede all other types of rules (with a few exceptions), hence cannot be used. Would be great if there was a way to use @import with Checkvist's custom CSS option.
Thanks, we'll take a look. Possibly there is an alternative way to add an icon, to avoid a clash with numbering CSS. As a workaround you can use an explicit icon like .
ReplyDeleteKirill Maximov How would I use this ?
ReplyDeleteSorry for the delay. I'd like to ask, have you applied CSS rules from the https://checkvist.com/checklists/486715/tasks/16834507, the part about .numberedList styling?
ReplyDeletebeta.checkvist.com - Checkvist customization (CSS samples) - outlined in Checkvist
Kirill Maximov Better late than never :)
ReplyDeleteNo I haven't applied the numberedList CSS rules ... should I?
Mark Dickens Sorry for the delay again. On the link I posted there is a fragment for custom icon usage when numberedLists are used, please check it out.
ReplyDeleteKirill Maximov thanks for this, it does something :)
ReplyDeleteAlmost there!
Below is a snippet of the CSS I am using for showing an icon.
The snippet also transforms the numbering (see attached screen clip) and I'm not sure how to prevent this. Any ideas?
.fg1 .userContent:before {
content: "\F132";
font-family: FontAwesome;
font-size: 24px;
font-weight: 500;
padding-right: 5px;
color: #cccccc;
display: inline-block;
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
text-shadow: 0.3px 0 0 #000, 0 -0.3px 0 #000, 0 0.3px 0 #000, -0.3px 0 0 #000;
}
/* The following section is required to fix case when icon is used with numbered lists /
.numberedList .fg1 .userContent:before {
* content: counters(section, ".") ". \F132"; /* Same icon code as in previous section */
}
https://lh3.googleusercontent.com/4rxCVe_w5QikBVjABAYzIZCnPgiEQeczR3t1Vp629fj-KJhMKGscXM9NSZgiwi_nigQeBbWNSnOAAZOuWAmjUGRNBOtoDlV-pUUA=s0
Hi Mark Dickens,
ReplyDeleteThis is all tricky stuff :)
Try this code instead:
.fg1.editable:before {
content: "\F132";
font-family: FontAwesome;
font-size: 24px;
font-weight: 500;
padding-right: 5px;
color: #cccccc;
display: inline-block;
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
text-shadow: 0.3px 0 0 #000, 0 -0.3px 0 #000, 0 0.3px 0 #000, -0.3px 0 0 #000;
}
Only one section is needed, no duplication.
HTH,
Kirill Maximov
ReplyDeleteGotcha! That's fab.
Thanks Kirill.
I hope Christmas has been good and have a great New Year!