Numbering interferes with fontawesome icon CSS

Numbering interferes with fontawesome icon CSS



Comments

  1. 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. Kirill Maximov How would I use this ?

    ReplyDelete
  3. Kirill Maximov Better late than never :)

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

    ReplyDelete
  4. 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
  5. 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
  6. 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
  7. 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

Hello friends

Hello friends!

I'm really enjoy using checkvist, you are adding great features very quickly.