Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Styling Unordered List

Home Forums Support Styling Unordered List

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #498729
    Janine

    Hi.

    How can I use the FontAwesome scissors (f0c4) for my bullet points?

    I would like to be able to control the size and colour. Thank you!

    GP Premium 1.5.6
    #498955
    Leo
    Staff
    Customer Support
    #498983
    Janine

    Thanks, Leo. I will study it and see if I make it happen. Thanks!

    #499039
    Janine

    Hi, Leo.

    I found this code:

    ul {
    list-style: none;
    }

    ul li {
    padding: 5px 0 5px 30px;
    position: relative;
    }

    ul li:before {
    content: ‘\f0c4’;
    color: #222;
    font-family: ‘FontAwesome’;
    position: absolute;
    top: 6px;
    left: 5px;
    }

    And this code:

    li{
    list-style-type: none;
    }

    li:before {
    content: “\f0c4”;
    color: #222;
    font-family: “FontAwesome”;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    }

    But neither works.

    I have the second one installed on my demo site because it was the simplest of the two. And it is changed both the ul and ol. It removed both bullets and numbering.

    Link to demo site: http://2ea52d4b.ngrok.io/ul-ol-post/

    Do you have any ideas? Thank you!

    #499107
    Jamal

    Hi

    The following has worked for me, you might want to give it a try. This is the css i used

    ul.scissor-list {
      list-style-type: none;
      margin: 0 0 1.5em 1.5em;
    }
    
    .scissor-list li {
      position: relative;
      padding-left: 25px;
      margin-bottom: 10px
    }
    
    .scissor-list li:before {
      position: absolute;
      top: 0;
      left: 0;
      font-family: FontAwesome;
      content: "\f0c4";
      color: #d3782d;
    }

    But in your html you have to put the scissor-list class like this

    <ul class="scissor-list">
    <li> First item </li>
    <li> Second item </li>
    <li> Next items </li>
    </ul>

    Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

    #499135
    Janine

    Hi, Jamal.

    Thank you so much for your help. It did change. But I still don’t have the scissors icon.

    #499205
    Leo
    Staff
    Customer Support

    Just tested and Jamal’s method worked perfectly.

    What are you seeing?

    #499233
    Janine

    Hi, Leo.

    Here’s link to what I’m getting with Jamal’s meethod:

    http://2ea52d4b.ngrok.io/ul-ol-post/

    Thank you!

    #499265
    Leo
    Staff
    Customer Support

    Make sure load essential icons option is not checked.

    #499393
    Janine

    Leo, where is this setting? Thank you.

    #499446
    Janine

    Is it under General in the customizer: Cache dynamic CSS?

    #499564
    Leo
    Staff
    Customer Support
    #499590
    Janine

    OMG, that worked and they look beautiful! Thanks, Leo.

    #499591
    Janine

    Leo, do you think I will take much of a performance hit? Thank you!

    #499593
    Janine

    And Jamal, I hope you get this message: Many thanks for your generosity! I appreciate it!

    (Leo, let me know how I can pass on my message to Jamal. Thank you!)

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.