Allow custom styling of point markers

[strazto]

Presently, the way this tool seems to handle the point dots is by prepending a div element in the body of the item, whose appearance is customized by css styling of the dot element's border (Radius, etc).

I wonder if a more elegant solution to this, to allow better marker style customization, might be to instead wrap the content in the <li> content here </li> tag, and set marker appearance with the the list-style property, OR, to instead allow arbitrary content to be placed in the point

[tdillan]

@mstr3336 I found a workaround for this using styling, pseudo-elements, and Font Awesome.
Here is an example using SCSS:

.timeline-dot {
  border: none;
  background: none;

  &::after {
    font-family: FontAwesome, sans-serif;
    font-weight: 900;
  }

  &.square::after {
    content: '\f096';
  }

  &.circle::after {
    content: '\f111';
  }
}

This eliminates the border/background of the default timeline dot and inserts a pseudo-element containing a different Font Awesome icon depending on the class applied to the timeline item.

With these styles, you then just have to set the appropriate className value on each of your data items and they'll be rendered with the corresponding icon defined in the SCSS.