Using Glyphicon Images Multiple Times in One Row Using a Single Line of Code

abbor123 · July 1, 2016, 6:32am

Hello,

I’m currently building my personal portfolio webpage and require help in creating a style using glyphicon.

I want to create a style akin to the below format, but using glyphicon images instead. Is there a way to create such a style using only a single (or finite) line(s) of code and not copy-pasting glyphicon class spans multiple times?

I’m willing to create something like this:
<<<<<<<<<>>>>>>>>>>

For example, I do not want to do this:

P.S.: My prior knowledge of web-development is limited to the ‘Tribute Page’ I created earlier in the course. As per the course map I’ll be learning basic javascript only after completing this portfolio page.

Thanks in advance.

Regards
AB

imtoobose · July 1, 2016, 12:34pm

If you’re interested in learning a relatively simple syntax that lets you use loops to write HTML, check out Jade. It’s a markup language that lets you use some basic loops, conditionals and other functions that compiles to HTML. You can use it directly in Codepen by choosing ‘Jade’ as the precompiler in the HTML options.

Here are the Jade docs:
For understanding how to write HTML tags and attributes:
http://jade-lang.com/reference/attributes/

For understanding how to write loops in Jade:
http://jade-lang.com/reference/iteration/

In your case I could write your HTML in Jade as:

    - var k = 0;
    while k< 10
      if k<5 
        span.glyphicon.glyphicon-chevron-left
      else
         span.glyphicon.glyphicon-chevron-right

Simple eh?
The alternative is writing ten lines of HTML. If you don’t like Jade, there’s also an alternative called HAML which I don’t have much experience with. For an example of a project I wrote with the help of Jade check out: http://codepen.io/imtoobose/pen/MeJZRp

abbor123 · July 2, 2016, 2:10pm

Thank you @imtoobose. That was quite helpful.