• 0

Bulleted lists with icons


Question

Posted (edited) · Report post

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?

 

 

Edited by DonRicardoRVM
4 people like this

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

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;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you, Jake.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

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

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Can you provide a link to your website please.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks. Now it is all ok.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now