Put the icon to the right of the writing

Hiba Youssef 0
Viewed 48

I have this project and I have a list and it contains several points and next to each point there is a right icon, and my problem is that I want to put the icon on the right side, as shown in the picture and not on the left side

enter image description here

index.html:

<p class="fst-italic">
                قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.

              </p>
                <ul style="direction:RTL;" >
                  <li > <i class="bi bi-check2-all"></i>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
                  <li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.<i class="bi bi-check2-all"></i></li>
                  <li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.<i class="bi bi-check2-all"></i></li>
                </ul>
              
              <p>
                الى من سابق وفنلندا. بحث ودول بتحدّي الهجوم أم, بل حتى النزاع بلديهما والكوري, ليرتفع وقدّموا هذا ان. لغزو العمليات مكن إذ. أي طوكيو واقتصار ايطاليا، أما, تونس ايطاليا، أي شيء, بل بعض الأجل البشريةً. عن بلا ميناء وحلفاؤها, دون صفحة ضمنها التجارية عن. أسيا ماليزيا، أي وقد, لم دار مهمّات ومحاولة, نفس هو ثانية الثالث.

              </p>
bootstrap-4 css html
2 Answers

Assuming you use an icon font:

Simply using CSS ul { list-style-type: "\icon-hex-code" } the positioning should be handled by the default html document direction mechanism. This will require you to remove the <i> from the <li>, otherwise you will get 2 icons.

By lack of icons I tested this with UNICODE U+2713 (Checkmark) pre/post-fixed with U+00A0 (non breaking space, html &nbsp;) to get some spacing around the icon. It's color will be equal to the font color of the li, which may be undesired in your case.

When your icon is an SVG you may be able to use list-style-image instead of list-style-type, but I have too little info to go with.

Which icons/file/images do you use for this? E.g. Fontawesome has CSS+iconfont vs. JS+SVG versions to choose from...

Check the snippet

ul {
    direction: rtl;

    /* \nbsp\checkmark\nbsp */
    list-style-type: "\00a0\2713\00a0";
    /* replace '2713' with your icon hex code */
}
<p class="fst-italic">
    قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.

</p>
<ul>
    <li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
    <li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
    <li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
</ul>

<p>
    الى من سابق وفنلندا. بحث ودول بتحدّي الهجوم أم, بل حتى النزاع بلديهما والكوري, ليرتفع وقدّموا هذا ان. لغزو العمليات مكن إذ. أي طوكيو واقتصار ايطاليا، أما, تونس ايطاليا، أي شيء, بل بعض الأجل البشريةً. عن بلا ميناء وحلفاؤها, دون صفحة ضمنها التجارية عن. أسيا ماليزيا، أي وقد, لم دار مهمّات ومحاولة, نفس هو ثانية الثالث.
</p>

Rene van der Lende0

You could also apply bootstrap's icons to the ::marker pseudo element to define custom bullet points.

[lang=ar] *,
.rtl * {
  direction: rtl;
  text-align: right;
}

.ul-check {
  padding-inline-start: 1.5em;
}

.ul-check li {
padding-left:0.5em;
}

[lang=ar] .ul-check li {
padding-right:0.5em;
}


.ul-check li::marker {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f26f";
  color: red;
  margin-right:-1em;
}

.bi-check2-all::before {
}


.flex{
  display:flex;
  gap:0.5em;
}
.item{
  border:1px solid #ccc;
  flex:1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

<div lang="ar" xml:lang="ar">
  <p class="fst-italic">
    قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
  </p>
  <div class="flex">
    <div class="item">1. flex item</div>
    <div class="item">2. flex item</div>
    <div class="item">2. flex item</div>
  </div>
  <ul class="ul-check ">
    <li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
    <li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
    <li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
  </ul>
</div>

<h2>English text</h2>  

<p>This is an English paragraph text. This is an English paragraph text. This is an English paragraph text. </p>
  <div class="flex">
    <div class="item">1. flex item</div>
    <div class="item">2. flex item</div>
    <div class="item">2. flex item</div>
  </div>
  <ul class="ul-check ">
    <li>This is an English bullet point text</li>
    <li>This is an English bullet point text</li>
    <li>This is an English bullet point text</li>
  </ul>

In the above example we're using language attributes lang=ar to specify the current section's language.

Now we can add suitable css rules to change text directions:

[lang=ar] *,
.rtl * {
  direction: rtl;
  text-align: right;
}
herrstrietzel0
Related