Assign different icons to a bullet list - Support | Kriesi.at

http://dev2.electrixinternational.com/frequently-asked-questions/

I am trying to assign different icons to each li on my bullet list.

Here is the page …

I have added this to my CSS, but cant figure out how to assign it to the actual different LI’s

This topic was modified 9 years, 1 month ago by Elliott.

October 14, 2015 at 5:31 pm #518839

Elliott

Hi richardelectrix!

Your link is giving me a 404. You could use some CSS like so to target individual items.

ul > li:nth-child(3) {  }
ul > li:nth-child(5) {  }

Best regards,
Elliott

October 15, 2015 at 9:36 am #519081

That wouldnt necessarily work as I dont know the order in which they will appear.

Is there nothing I can do with an LI class?

October 16, 2015 at 5:08 am #519659

Ismael

Moderator

Hi!

I’m sorry but I can’t load the page. Why wouldn’t you know the order of the list? The code above should work as if you’re counting from number 1 to the next.

ul > li:nth-child(1) {  }
ul > li:nth-child(2) {  }
ul > li:nth-child(3) {  }
ul > li:nth-child(4) {  }

Please refer to this link: https://css-tricks.com/how-nth-child-works/

Regards,
Ismael

October 16, 2015 at 8:00 am #519696

I do know the order of the list in one particular instance, it is

phone,
fax,
email.

But on another bullet list I have

Phone
Email
Question mark

Doing it using nth child I would have to have several combinations of lists configured in css.

I was looking for a way where I could have several LI classes (one for fax, phone, email, question mark)

Then call the LI class in for the specific LI.

October 19, 2015 at 5:49 pm #521092

Elliott

Hi!

You could give each element a custom class by doing this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

Regards,
Elliott

October 20, 2015 at 10:56 am #521486

Thats what I thought. I have ALB turned on, but I cant figure out how to apply that to my ul list.

<ul class="list">
	<li class="list-phone">Phone 12345678</li>
	<li class="list-email">Email  (Email address hidden if logged out) </li>
	<li class="list-fax">Fax 78945611</li>
</ul>

And I have this in my CSS:

/* CT START Tick Box List */

ul.list  {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E822";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Tick Box List */

/* CT START Lock Symbol List */

ul.list-lock {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list-lock li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-lock li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E839";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Lock Symbol List */

/* CT START Phone Symbol List */

ul.list-phone  {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list-phone li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-phone li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E854";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Phone Symbol List */

/* CT START Email Symbol List */

ul.list-email {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list-email li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-phone li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E805";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Email Symbol List */

/* CT START Fax Symbol List */

ul.list-fax {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0px;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0px;
}

.list-fax li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-fax li:before {
  position: absolute;
  top: 3px;
  left: -15px;
  background-color: #FFFFFF;    
  font-family: 'fontello';    
  content: "E886";
  font-size: 18px;
  color: #007ab6;
}

/* CT END Fax Symbol List */

Incidentally, it is displaying text again instead of the icons.

October 21, 2015 at 7:36 pm #522463

Andy

Hey!

what do you mean you have ALB turned on? it’s turned on always (by default).
As Elliott already mentioned, follow this tutorial and let us know when you are done:
http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Afterwards you have a new field when editing your list elements in question where you can define a unique CSS class.

Best regards,
Andy

October 21, 2015 at 7:58 pm #522476

I have followed those instructions previously but I still don’t see how being able to give a custom css class to a text block containing a bullet list is going to be able to allow me to choose which icons I want per bullet in a UL?

October 22, 2015 at 4:26 pm #523088

Andy

Hey!

in your previous post you said this:

I was looking for a way where I could have several LI classes (one for fax, phone, email, question mark)

Then call the LI class in for the specific LI.

That is why we suggested to activate custom class for all ALB elements. Because then you can call a unique LI class for the specific LI.

Now I am not sure anymore what you want to achieve. Can you provide us links of what you have now and screenshots showing what you want to achieve instead? would be very helpful for us to understand what you need.

Best regards,
Andy

October 22, 2015 at 4:34 pm #523099

This is what I have now …http://screencast.com/t/2rXIykf5

This is a mockup of what I am trying to achieve … http://screencast.com/t/anLbmSD01xU

Thanks

October 22, 2015 at 4:47 pm #523111

Elliott

Hey!

Your link is still giving me a 404. Send us a link to the page where you are using the list elements and have given them custom CSS classes.

Cheers!
Elliott

October 22, 2015 at 4:58 pm #523128

http://dev2.electrixinternational.com/about-electrix/frequently-asked-questions/

Which link are you referring to?

<ul class="list">
	<li class="list-phone">Order by telephone – Call: +44 (0) 1388 774455</li>
	<li class="list-email">Send your order by email – Email: <a href="mailto: (Email address hidden if logged out) "> (Email address hidden if logged out) </a></li>
	<li class="list-fax">Fax us your order on company letterhead – Fax: +44 (0) 1388 777359</li>
</ul>

CSS

ul.list  {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0;
}

.list li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list li:before {
    position: absolute;
    top: 3px;
    left: -15px;
    background-color: #FFFFFF;    
    font-family: 'fontello';    
    content: "\E822"; /* Important the backslash must be present before the E822 */
    font-size: 18px;
    color: #007ab6;
}

/* CT END Tick Box List */

/* CT START Lock Symbol List */

ul.list-lock {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0;
}

.list-lock li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-lock li:before {
    position: absolute;
    top: 3px;
    left: -15px;
    background-color: #FFFFFF;    
    font-family: 'fontello';    
    content: "\E839"; /* Important the backslash must be present before the E839 */
    font-size: 18px;
    color: #007ab6;
}

/* CT END Lock Symbol List */

/* CT START Phone Symbol List */

ul.list-phone  {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0;
}

.list-phone li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-phone li:before {
    position: absolute;
    top: 3px;
    left: -15px;
    background-color: #FFFFFF;    
    font-family: 'fontello';    
    content: "\E854"; /* Important the backslash must be present before the E854 */
    font-size: 18px;
    color: #007ab6;
}

/* CT END Phone Symbol List */

/* CT START Email Symbol List */

ul.list-email {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0;
}

.list-email li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-phone li:before {
    position: absolute;
    top: 3px;
    left: -15px;
    background-color: #FFFFFF;    
    font-family: 'fontello';    
    content: "\E805"; /* Important the backslash must be present before the E805 */
    font-size: 18px;
    color: #007ab6;
}

/* CT END Email Symbol List */

/* CT START Fax Symbol List */

ul.list-fax {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    display: block;
    left: 0;
    list-style-position: outside;
    width: 100%;
    padding-bottom: 0;
}

.list-fax li {
    list-style-type: none !important;
    list-style: none !important;
    position: relative;
    padding-left: 10px;
    margin-bottom: 10px;
}

.list-fax li:before {
    position: absolute;
    top: 3px;
    left: -15px;
    background-color: #FFFFFF;    
    font-family: 'fontello';    
    content: "\E886";
    font-size: 18px;
    color: #007ab6;
}

/* CT END Fax Symbol List */

October 23, 2015 at 1:07 pm #523740

Andy

Hey!

please refuse from posting your whole CSS code into your posts again and again, as it just does not serve us at all.
Refer to this thread: https://kriesi.at/support/topic/replace-toggle-icon-with-another-entypo-fontello-font-or-use-a-png/

Best regards,
Andy

October 23, 2015 at 2:04 pm #523810

Guenni007

hm try it f.e. for fax with:

.list li.list-fax::before {
    content: "\E886";
}

the .list li has to be part of that declaration if it has to override the .list li::before rule
and you did not look at the cascading order it is li.list-phone not .list-phone li

and btw. you got in your code a mistake on email:before rule there is a phone inside

This reply was modified 9 years, 1 month ago by Guenni007.

October 23, 2015 at 2:59 pm #523869