Jump to content


Photo
- - - - -

Bulleted lists with icons

lists icons bulleted lists

Best Answer Danny , 26 September 2013 - 08:04 AM

OK, my bad, I didn't give you all the code!

Remove all your custom CSS, which you added related to the list and replace with the following:

 

 #site .icons-ul {
  margin-left: 2em;
  list-style-type: none;
}
#site .icons-ul > li {
  position: relative;
}
#site .icons-ul .icon-li {
  position: absolute;
  left: -2em;
  width: 2em;
  text-align: center;
  line-height: inherit;
}
Go to the full post


  • Please log in to reply
8 replies to this topic

#1 DonRicardoRVM

DonRicardoRVM

    Advanced Member

  • Members


  • 57 posts
  • LocationMadrid
  • Framework Version:DMS
  • Country: Country Flag

Posted 13 September 2013 - 09:03 AM

Hi!

 

I want put in my site several bulleted lists with icons. As is told in the docs, I put this code html:

 
<ul class="icons-ul">
	<li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
	<li><i class="icon-li icon-ok"></i>Buttons</li>
	<li><i class="icon-li icon-ok"></i>Button groups</li>
	<li><i class="icon-li icon-ok"></i>Navigation</li>
	<li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
	<li><i class="icon-li icon-ok"></i>…and many more with custom CSS</li>
</ul>

And the result is in the attached image. There are two icons the circle and the icon, and the icon, and the letter in the list is smaller. I did´t make changes in the css.

 

Can somebody help me?

 

 

Attached Files


Edited by DonRicardoRVM, 13 September 2013 - 09:06 AM.

  • korsetk, carpinteyroyvd, michaeltvl and 1 other like this

#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 13 September 2013 - 05:37 PM

Hi @DonRicardoRVM - The circle icons are there because they are the default icon for an unordered list. If you remove the UL and LI parts of the code you're using and simply have the icons in front of your text like

<i class="icon-li icon-ok"></i> Bulleted lists (like this one)
<i class="icon-li icon-ok"></i> Buttons

etc, you'll achieve the look you're after.


  • alanslingsby and DonRicardoRVM like this

#3 DonRicardoRVM

DonRicardoRVM

    Advanced Member

  • Members


  • 57 posts
  • LocationMadrid
  • Framework Version:DMS
  • Country: Country Flag

Posted 25 September 2013 - 08:51 AM

Thank you, Jake.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 September 2013 - 08:57 AM

Use the code you had, but add the following to your custom CSS:

 

.icons-ul {
margin-left: 2em;
list-style-type: none;
}

  • DonRicardoRVM likes this

#5 DonRicardoRVM

DonRicardoRVM

    Advanced Member

  • Members


  • 57 posts
  • LocationMadrid
  • Framework Version:DMS
  • Country: Country Flag

Posted 25 September 2013 - 02:30 PM

Use the code you had, but add the following to your custom CSS:
 
.icons-ul {
margin-left: 2em;
list-style-type: none;
}

 
It didn´t work. I did some changes. I think that it is a bad idea, but now it works.
 
I used this code:

 
<ul class="icons-ul">
<li><i class="icon-li icon-ok"></i>.............</li>
<li><i class="icon-li icon-ok"></i>.............</li>
<li><i class="icon-li icon-ok"></i>.............</li>
<li><i class="icon-li icon-ok"></i>.............</li>
</ul>

 
And I added the following in the custom CSS:
 

 
 
#page .hentry ul, .hentry ol {
     padding: 0;
     margin: 1.3em 0 1.3em 3.3em;
     font-size: 100%;
     line-height: 1.3em;
}
 
 
#page .icons-ul {
     text-indent: -10px;
     margin-leftt: 2em;
     list-style-type: none;
}
  
#page .icon-ok {
     display: inline block;
     text-align: center;
     width: .6em;
}

Edited by DonRicardoRVM, 25 September 2013 - 02:30 PM.


#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 September 2013 - 07:35 AM

The code I gave you works, I tested it before I posted.

Can you provide a link to your website please.



#7 DonRicardoRVM

DonRicardoRVM

    Advanced Member

  • Members


  • 57 posts
  • LocationMadrid
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 September 2013 - 07:47 AM

The code I gave you works, I tested it before I posted.

Can you provide a link to your website please.

Yes, of course. Thanks

 

The website is http://www.resulta-2.com, and you must authenticate as user demo with password demo.

 

here, an example of the list: http://resulta-2.com/?page_id=2378



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 September 2013 - 08:04 AM   Best Answer

OK, my bad, I didn't give you all the code!

Remove all your custom CSS, which you added related to the list and replace with the following:

 

 #site .icons-ul {
  margin-left: 2em;
  list-style-type: none;
}
#site .icons-ul > li {
  position: relative;
}
#site .icons-ul .icon-li {
  position: absolute;
  left: -2em;
  width: 2em;
  text-align: center;
  line-height: inherit;
}


#9 DonRicardoRVM

DonRicardoRVM

    Advanced Member

  • Members


  • 57 posts
  • LocationMadrid
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 September 2013 - 08:52 AM

Thanks. Now it is all ok.







Also tagged with one or more of these keywords: lists, icons, bulleted lists