0
Welcome Guest! Login
0 items Join Now

SOLVED List icon

Last Post
Search Topic

  • SOLVED List icon

    Posted 7 years 10 months ago
    • Hello,
      How can I add icon to bullet list at Gantry 5.
      On template that I used on Gantry 4 I do that like this:
      <ul class="list-icon rightarrow">
      <li>a<li>
      <li>b<li>
      </ul>
      Is it posible to set up on gantry 5 something like that? On Helium template?

      I know that I can change css and than put in code <li class="my-icon">a</li> but i need to write that on every line.
    • Last Edit: 7 years 10 months ago by Zarko Vujicic.
    #1353959
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED List icon

    Posted 7 years 10 months ago
    • use the fontawesome classes "fa fa-list".

      If you need more help, Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1353962

  • Re: SOLVED List icon

    Posted 7 years 10 months ago
    • Yes, i could but than I must call class on every line, like this:

      <ul>
      <li class="fa fa-chevron-right">a</li>
      <li class="fa fa-chevron-right">b</li>
      <li class="fa fa-chevron-right">c</li>
      </ul>

      And when I do that, font of list is changed.

      Sorry, i can't provide URL because I'm on local? Trying Gantry 5.
    #1353965
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED List icon

    Posted 7 years 10 months ago
    • It's going to be really hard to help you if you don't get your site online. This issue is all about context in which you are doing this - what happens depends on the context and what other classes you have used. But, i've guessed and I think this will help you...
      ul li.fa {
   font-family: inherit;
   display: block;
}
ul li.fa:before {
   font-family: fontawesome;
}

      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1353969

  • Re: SOLVED List icon

    Posted 7 years 10 months ago
    • Thanks anyway.
      I do this and its ok, font remain same but I need to place code on each line of list.
    #1353973
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED List icon

    Posted 7 years 10 months ago
    • in the CSS that I gave you change "inherit" to the font you want to use on each line.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1353976

Time to create page: 0.056 seconds