seo Question posted in
Some basic information to get you started with this can be found here.

How can I indent text to avoid wrapping around an icon? – SEO

enter image description hereI am using Ionicon icons and Bootstrap to create a custom bulleted list (see pic). Because the icon I am using as the bullet is custom, the text wraps around it. Instead I want the text to indent slightly so that it doesn’t wrap – in the way that ordinary bullets do.

Many thanks

Thomas

<div class="services-threefold-solutions ">
        <div class="container-fluid showcase-panel-dark">
              <div class="row">
                  <div class="col-md-6">
                      <h2>Threefold solutions.</h2>
                        <p >As a <strong>developer</strong>, <strong>SEO technician</strong> and <strong>data engineer</strong>, I wear a lot of hats! You can combine services across my <a href="{{ site.baseurl }}/expertise">areas of expertise</a> into a single package that would otherwise require expensive agency retainers or several freelancers. </p>
                        <p>Most SEOs are not developers and data specialists. Most developers are not well versed in SEO. In contrast, <strong>I am able to diagnose technical problems and implement their solution.</strong></p>
                        <p>Even if your solution sits squarely within a single service line, my integrated skillset means:</p>
                          <ul class="showcase-bullets pl-0">
                            <li > <ion-icon name="checkmark-circle-outline"></ion-icon> development work will always embody SEO best practices</li>
                            <li> <ion-icon name="checkmark-circle-outline"></ion-icon> SEO consultancy includes careful consideration of the most effective development methods </li>
                            <li> <ion-icon name="checkmark-circle-outline"></ion-icon> every service has tracking and analytics at the forefront, promoting accountability and empowering you to chart subsequent performance and growth </li>
                          </ul>
                    </div>
                  <div class="col-md-6">
                    <!--Image goes here-->
                  </div>
              </div>
        </div>
    </div>

2

Tags:

2

Answers


  1. 0

    You can create a left margin on the UL and make it position:relative. Then, absolute position the icons over the left margin…

    .showcase-bullets li {
    margin-left: 20px;
    position: relative;
}

.ion {
    left: -20px;
    position: absolute;
    text-align: center;
    width: 11px;
    line-height: inherit;
}

    Demo

    You can adjust the left margin and width however you see fit, and there’s no need to restructure the HTML.

    Login or Signup to reply.
  2. 0

    What i prefer to do is wrap the text after the icon & use this little float trick

    <ul>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa <br/> aksjdfkasjdfa</span>
  </li>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa</span>
  </li>
  <li>
      <i>Icon</i> <span>asdfasjfaksjdfa</span>
  </li>
</ul>


i {
  float: left;
}

span {
  display: block;
  padding-left: 120px; // width of the icon
}

    https://jsfiddle.net/aq9Laaew/290997/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search