要素と要素の間にアイコンを配置したい

Question

現在
https://isara.life/
こちらのサイトを模写しております

真ん中のaboutアイコンを自分ではどうやるかわかりません
どのような方法であの場所に配置するのでしょうか

コードを確認してもどれで境に配置しているかわかりませんでした。
よろしくお願いします

<div class="concept">
       <div class="concepth">
        <h2>エンジニアとして本当の自由を手に入れるためには？</h2>
      </div>
        <div class="concepttxt">
          <p>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。</p>
          <p>しかしそこでの学習の先は、提携して決められた就職先に就職すること。</p>
          <p>これで本当にいいのですか？</p>
          <p>日本人エンジニアはアメリカと較べて給料が格段に低い。</p>
          <p>その理由がここにあり、エンジニアは自分の給料をコントロールすべきなのです。</p>
          <p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。</p>
          <p>そこで必要なのが『<strong class="kasegu">稼ぐ力</strong>』です。</p>
        </div>
      </div>
      <div class="about">
        <div class="abouticon">
          <p>About</p>
        </div>
          <div class="abuoth">
            <h3>ノマドエンジニア育成講座<br>
              iSara[イサラ]とは</h3>
            <p>「稼ぐことに」フォーカスしたWebエンジニア育成講座です。</p>
          </div>
          <div class="aboutskill　fbox4">
            <p>稼げるエンジニアに必要な5つのスキルとは？</p>
            <div class="fbox4item">
              <img src="./isaraimages/skill.jpg" alt="skillicon">
              <p>基礎的な</p>
              <p>プログラミングスキル</p>
            </div>
            <div class="fbox4item">
              <img src="./isaraimages/sales.jpg" alt="salesicon">
              <p>案件獲得に必要な</p>
              <p>営業力</p>
            </div>
            <div class="fbox4item">
              <img src="./isaraimages/document.jpg" alt="documenticon">
              <p>見積もり作成から</p>
              <p>納品までの知識</p>
            </div>
            <div class="fbox4item">
              <img src="./isaraimages/plusone.jpg" alt="staricon">
              <p>自分の付加価値を</p>
              <p>高めるスキル</p>
            </div>
            <div class="fbox4item">
              <img src="./isaraimages/connection.jpg" alt="connectionicon">
              <p>フリーランス同士の</p>
              <p>横のつながり</p>
            </div>
          </div>
      </div>

.concept{
  width:100%;
  height:auto;
  text-align: center;
  background:url("./isaraimages/road.jpg");
  background-size:100% 100px;
  background-repeat: no-repeat;
  background-position:bottom;
  .concepth{
    p{
      font-size: 20px;
    }
    h2{
      padding:30px;
      position:relative;
      font-size: 28px;
      &::before, &::after{
        content:"";
        width:50px;
        height:50px;
        position:absolute;
      }
      &::before{
        border-left:solid 4px $yellow;
        border-top:solid 4px $yellow;
        top:0;
        left:6em;
      }
      &::after{
        border-right:solid 4px $yellow;
        border-bottom:solid 4px $yellow;
        bottom:0;
        right:6em;
      }
    }
  }
  .concepttxt{
        padding-bottom:120px;
        .kasegu{
          background:linear-gradient(transparent 50%, $yellow 50%);
        }
  }
}
.about{
  width:100%;
  height:650px;
  background-color:#FEF5E0;
  text-align: center;
  .abouticon{
    color:white;
    padding:0;
    margin:0;
    width:80px;
    height:80px;
    text-align: center;
    background-color:$yellow;
    border-radius:50%;
    display: inline-block;
    p{
      line-height:50px;
    }
  }
}

Answer 1

abouticonクラスに以下のようなCSSを加えてみるとうまくいくかもで

.abouticon{
  position: relative;
  top: -40px;
}

Comments

[sakana_motoki]

うまくいきました！
ありがとうございました！