Put the icon on the right side to write if the language is Arabic

Hiba Youssef 0
Viewed 36

enter image description here

I have an interface and in this interface I have a set of data in addition to an icon next to each line,

The language on the website is Arabic.

That is, the icon should be in the right part "the place that the green arrow points to",

But I didn't know how to put the icon to the right.

How can i solve the problem?

.features {
  padding-top: 20px;
}

.features .icon-box {
  padding-left: 15px;
}

.features .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 5px 0 10px 60px;
}

.features .icon-box i {
  font-size: 48px;
  float: left;
  color: #d50000;
  align-items: right;
  display: flex;
}

.features .icon-box p {
  font-size: 15px;
  color: #848484;
  margin-left: 60px;
}

.features .image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}
<section id="features" class="features">
  <div class="container" data-aos="fade-up">

    <div class="row">
      <div class="image col-lg-6" style='background-image: url("assets/img/features.jpg");' data-aos="fade-right"></div>
      <div class="col-lg-6" data-aos="fade-left" data-aos-delay="100">
        <div class="icon-box mt-5 mt-lg-0" data-aos="zoom-in" data-aos-delay="150">
          <i class="bx bx-receipt"></i>
          <h4>بعثة</h4>
          <p>لدعم قطاع الأعمال المتنامي في المنطقة والشّركات الدوليّة من خلال توفير أفضل الخبرات المحليّة والمرافق الحديثة وخدمات الأعمال العالميّة في بيئة أكثر تنافسيّة.</p>
        </div>
        <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
          <i class="bx bx-cube-alt"></i>
          <h4>رؤية</h4>
          <p>نهدف إلى أن نكون إحدى الشّركات الرائدة القائمة على الخدمات في دبي ، والتي تقدم مجموعة واسعة من الحلول المتعلقة بإعداد الأعمال ودعم العمليّات للشّركات الصغيرة والمتوسطة والكبيرة بالإضافة إلى مرافق الرعاية الصحيّة والمتخصصين في دبي.</p>
        </div>
        <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
          <i class="bx bx-images"></i>
          <h4>الشّركات الصغيرة و المتوسّطة</h4>
          <p>تقدم BC اليوم خدمة رائعة لتأسيس الشّركات الصغيرة والمتوسّطة وكذلك المقتنيات الكبيرة وتهتم بالعلاقات العامة للشّركة مع جميع الدّوائر الحكوميّة في جميع أنحاء دبي وتوفر الخدمات القانونيّة على أساس سنوي بمجرّد إنشاء الشركة.</p>
        </div>
        <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
          <i class="bx bx-shield"></i>
          <h4>أكبر مزودي الخدمة للشّركات</h4>
          <p>نمت BC لتصبح واحدة من أكبر مزودي الخدمات للشّركات التي تقوم بجميع أنواع الأنشطة في دبي ، مع إيلاء اهتمام كبير لمؤسّسات الرعاية الصحيّة والمقاولات والتّجارة والتّموين.</p>
        </div>
      </div>
    </div>

  </div>
</section>

css html
2 Answers

First thing, Running your code snippet doesn't produce the results as intended. There are two things to do to get to that.

  1. Use "dir" : rtl on the section tag for the direction of content.
  2. Use float : right on in CSS.

You have set float to left. In order it to be right, you have to set it to right, despite step 1. If you fail to change the float direction, then the icon will be on the right side but not as you are intended. It will be off your design as provided in the question.

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features {
  padding-top: 20px;
}

.features .icon-box {
  padding-left: 15px;
}

.features .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 5px 0 10px 60px;
}

.features .icon-box i {
  font-size: 48px;
  float: right;
  color: #d50000;
  align-items: right;
  display: flex;
}

.features .icon-box p {
  font-size: 15px;
  color: #848484;
  margin-left: 60px;
}

.features .image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}
 
 <section dir="rtl" id="features" class="features">
      <div class="container" data-aos="fade-up">

        <div class="row">
          <div class="image col-lg-6" style='background-image: url("assets/img/features.jpg");' data-aos="fade-right"></div>
          <div class="col-lg-6" data-aos="fade-left" data-aos-delay="100">
            <div class="icon-box mt-5 mt-lg-0" data-aos="zoom-in" data-aos-delay="150">
              <i class="bx bx-receipt"></i>
              <h4>بعثة</h4>
              <p>لدعم قطاع الأعمال المتنامي في المنطقة والشّركات الدوليّة من خلال توفير أفضل الخبرات المحليّة والمرافق الحديثة وخدمات الأعمال العالميّة في بيئة أكثر تنافسيّة.</p>
            </div>
            <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
              <i class="bx bx-cube-alt"></i>
              <h4>رؤية</h4>
              <p>نهدف إلى أن نكون إحدى الشّركات الرائدة القائمة على الخدمات في دبي ، والتي تقدم مجموعة واسعة من الحلول المتعلقة بإعداد الأعمال ودعم العمليّات للشّركات الصغيرة والمتوسطة والكبيرة بالإضافة إلى مرافق الرعاية الصحيّة والمتخصصين في دبي.</p>
            </div>
            <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
              <i class="bx bx-images"></i>
              <h4>الشّركات الصغيرة و المتوسّطة</h4>
              <p>تقدم BC اليوم خدمة رائعة لتأسيس الشّركات الصغيرة والمتوسّطة وكذلك المقتنيات الكبيرة وتهتم بالعلاقات العامة للشّركة مع جميع الدّوائر الحكوميّة في جميع أنحاء دبي وتوفر الخدمات القانونيّة على أساس سنوي بمجرّد إنشاء الشركة.</p>
            </div>
            <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
              <i class="bx bx-shield"></i>
              <h4>أكبر مزودي الخدمة للشّركات</h4>
              <p>نمت BC لتصبح واحدة من أكبر مزودي الخدمات للشّركات التي تقوم بجميع أنواع الأنشطة في دبي ، مع إيلاء اهتمام كبير لمؤسّسات الرعاية الصحيّة والمقاولات والتّجارة والتّموين.</p>
            </div>
          </div>
        </div>

      </div>
    </section><!-- End Features Section -->

Dinesh Pandikona0

You may use dir="rtl" on your right-to-left sections:

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features {
  padding-top: 20px;
}

.features .icon-box {
  padding-left: 15px;
}

.features .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 5px 0 10px 60px;
}

.features .icon-box i {
  font-size: 48px;
  float: left;
  color: #d50000;
  align-items: right;
  display: flex;
}

.features .icon-box p {
  font-size: 15px;
  color: #848484;
  margin-left: 60px;
}

.features .image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}
 
 <section dir="rtl" id="features" class="features">
      <div class="container" data-aos="fade-up">

        <div class="row">
          <div class="image col-lg-6" style='background-image: url("assets/img/features.jpg");' data-aos="fade-right"></div>
          <div class="col-lg-6" data-aos="fade-left" data-aos-delay="100">
            <div class="icon-box mt-5 mt-lg-0" data-aos="zoom-in" data-aos-delay="150">
              <i class="bx bx-receipt"></i>
              <h4>بعثة</h4>
              <p>لدعم قطاع الأعمال المتنامي في المنطقة والشّركات الدوليّة من خلال توفير أفضل الخبرات المحليّة والمرافق الحديثة وخدمات الأعمال العالميّة في بيئة أكثر تنافسيّة.</p>
            </div>
            <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
              <i class="bx bx-cube-alt"></i>
              <h4>رؤية</h4>
              <p>نهدف إلى أن نكون إحدى الشّركات الرائدة القائمة على الخدمات في دبي ، والتي تقدم مجموعة واسعة من الحلول المتعلقة بإعداد الأعمال ودعم العمليّات للشّركات الصغيرة والمتوسطة والكبيرة بالإضافة إلى مرافق الرعاية الصحيّة والمتخصصين في دبي.</p>
            </div>
            <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
              <i class="bx bx-images"></i>
              <h4>الشّركات الصغيرة و المتوسّطة</h4>
              <p>تقدم BC اليوم خدمة رائعة لتأسيس الشّركات الصغيرة والمتوسّطة وكذلك المقتنيات الكبيرة وتهتم بالعلاقات العامة للشّركة مع جميع الدّوائر الحكوميّة في جميع أنحاء دبي وتوفر الخدمات القانونيّة على أساس سنوي بمجرّد إنشاء الشركة.</p>
            </div>
            <div class="icon-box mt-5" data-aos="zoom-in" data-aos-delay="150">
              <i class="bx bx-shield"></i>
              <h4>أكبر مزودي الخدمة للشّركات</h4>
              <p>نمت BC لتصبح واحدة من أكبر مزودي الخدمات للشّركات التي تقوم بجميع أنواع الأنشطة في دبي ، مع إيلاء اهتمام كبير لمؤسّسات الرعاية الصحيّة والمقاولات والتّجارة والتّموين.</p>
            </div>
          </div>
        </div>

      </div>
    </section><!-- End Features Section -->

realSamy0
Related