[Resolved] Number in Circles for Inline Text

Home Forums Support [Resolved] Number in Circles for Inline Text

Home Forums Support Number in Circles for Inline Text

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2335597
    Py

    I have an image where I have step numbers in an image which I call out in the article.

    Here is an example:

    [img]https://i.imgur.com/p6RHNc0.png[/img]

    Right now I am using unicode to create the green circles in the text:

    HTML

    
    <div class="stepcircle">❶</div>		
    <div class="stepcircle">❷</div>		
    <div class="stepcircle">❸</div>		
    <div class="stepcircle">❹</div>		
    <div class="stepcircle">❺</div>		
    <div class="stepcircle">❻</div>		
    

    CSS

    
    .stepcircle{
    	color:#00d07e;
    	font-size:1.3em;
    }
    

    However the problem is the circles are too small in the default font size. When I increase the font size the line spaces changes for lines with the circle (red in image) compared to normal lines (blue in image).

    What is the best way to replicate these circles without disturbing the line spacing? Will css or svg be better than unicode?

    #2335630
    Fernando
    Customer Support

    Hi Py,

    Can you try setting the line-height of these <mark> tags to 0? Then try changing the font-size.

    #2335668
    Py

    Thank you. Adding line-height:0px; fixed the issue

    #2335680
    Fernando
    Customer Support

    You’re welcome Py!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.