0
Welcome Guest! Login
0 items Join Now

SOLVED Typography - create bullets out of icons

Last Post
Search Topic

  • SOLVED Typography - create bullets out of icons

    Posted 14 years 8 months ago
    • Hello,

      I am trying to use the approval-icon as a bullet, along with the attention and alert ones. Here is what I have so far and it works 90%
      ul.bullet-10, ul.bullet-11, ul.bullet-12 {padding: 0 0 0 5px; margin: 0 0 15px;}
ul.bullet-10 li, ul.bullet-11 li, ul.bullet-12 li {list-style: none; padding: 0 0 0 25px; margin: 0 0 3px; background-repeat: no-repeat; background-position: 0 5px;}
ul.bullet-10 li a, ul.bullet-11 li a, ul.bullet-12 li a {font-size: 100%;line-height: 1.7;}
ul.bullet-10 li {background-image: url(../images/typography/approved-icon.png);}
ul.bullet-11 li {background-image: url(../images/typography/alert-icon.png);}
ul.bullet-12 li {background-image: url(../images/typography/attention-icon.png);}

      I changed the padding:0 0 0 15px to 25px to give extra space. My problem now is that bullets on a single line of text get cut off. What I am trying to figure out is how can I prevent the icons from being cut off on the bottom? Is there something in the CSS I can change or should I make the images a bit smaller?

      Attached is a picture of what is happening:

      - Roger
    • Last Edit: 14 years 8 months ago by Roger Huston.
    #550760
    • Ben Harold's Avatar
    • Ben Harold
    • Sr. Rocketeer
    • Posts: 231
    • Thanks: 1
    • Freelance Developer

    Re: SOLVED Typography - create bullets out of icons

    Posted 14 years 8 months ago
    • You need to increase the line-height of your list items. Either that or resize the images in an external editor.
    #550782

  • Re: SOLVED Typography - create bullets out of icons

    Posted 14 years 8 months ago
    • Ben,

      I had tried that before, but now I think I have solved the issue. I noticed the line-height above was only associated with links and so I moved it up and increased it to 1.8 and it seems to work.

      Thank You,

      Roger
    #550797

  • Re: SOLVED Typography - create bullets out of icons

    Posted 14 years 8 months ago
    • Hi,

      Try adding some margin bottom to force the element down.

      Best of luck.
    #550823

Time to create page: 0.071 seconds