Icon not centered

[alexroumi]

In the timeline the icons are not centered.

[kwiznix]

How did you put an image? my images wont show up..

[payapula]

@kwiznix We can pass it in icon prop for VerticalTimelineElement.

If this doesn't help please create a codesandbox reproduction and let us investigate the issue.

[kwiznix]

I tried to use my custom icon and couldnt get them to work, now trying with fontawesome icons, and seems to work great, but I have the same issue, the images arent centered

[payapula]

Hmm. I think you could make it center aligned with css by passing styles to IconStyle prop, or you can directly style the class vertical-timeline-element-icon. This package is not doing anything special with the alignment of icons, so CSS should help us here.

In any case, a repro would help us reproduce the problem :)

[ertemishakk]

 <VerticalTimelineElement
         className="vertical-timeline-element--work"
         contentStyle={{ background: 'whitesmoke', color: 'black' }}
         contentArrowStyle={{ borderRight: '7px solid  whitesmoke' }}
         iconStyle={{ background: 'whitesmoke', color: '#485fee' }}
         icon={<div className='text-center'><i style={{ lineHeight: '60px', fontSize: 18 }} className="fas fa-tag"></i></div>}
>

</VerticalTimelineElement>

Try the icon above