Numbering interferes with fontawesome icon CSS

Numbering interferes with fontawesome icon CSS



Comments

  1. Kirill Maximov (KIR)12 November 2017 at 02:58

    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 .

    ReplyDelete
  2. Mark Dickens3 January 2018 at 05:03

    Kirill Maximov How would I use this ?

    ReplyDelete
  3. Kirill Maximov (KIR)5 January 2018 at 11:32

    Sorry 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?
    beta.checkvist.com - Checkvist customization (CSS samples) - outlined in Checkvist

    ReplyDelete
  4. Mark Dickens30 September 2018 at 07:07

    Kirill Maximov Better late than never :)

    No I haven't applied the numberedList CSS rules ... should I?

    ReplyDelete
  5. Kirill Maximov (KIR)5 October 2018 at 04:41

    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.

    ReplyDelete
  6. Mark Dickens19 December 2018 at 04:41

    Kirill Maximov thanks for this, it does something :)

    Almost 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

    ReplyDelete
  7. Kirill Maximov (KIR)21 December 2018 at 13:59

    Hi Mark Dickens,

    This 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,

    ReplyDelete
  8. Mark Dickens28 December 2018 at 06:45

    Kirill Maximov

    Gotcha! That's fab.

    Thanks Kirill.

    I hope Christmas has been good and have a great New Year!

    ReplyDelete

Post a Comment

Popular posts from this blog

Any Toggl users here?

Any Toggl users here? I'm putting together an integration so the toggl (Chrome extension) button ( https://github.com/toggl/toggl-button ) is displayed for tasks on a Checkvist list. It's dead simple (a few lines of javascript), but I'm slightly torn on the best way to handle one aspect: whether or not toggl is shown for a particular list. It can't be always-on, as it adds too much clutter for non-projecty lists (who wants a timer button for the carrots on their grocery list?). What I have now is that if any task on a list is tagged #toggl, then all tasks on that list will have the toggl button. A few alternatives I canvassed were: - display toggl buttons only on subtasks of a task tagged with #toggl - display toggl buttons only on focused (hoisted) tasks - find some other way to indicate that all of a list's tasks should have the button, eg. something encoded in the list's name I think what I have now is the most convenient of these (I don't want to hav...
Read more