【範例結果】

  <section>
    <div class="subtitle">
      <h2>旅遊推薦</h2>
      <div class="subicon"><img src="./image/subicon01.svg" alt=""></div>
      <p>旅行，卻彷如無限大符號地， <br>
        一次次旅程感受或發現過去所未曾領略的極致所在。</p>
    </div>
    <div class="tripNoteBg">
      <div class="tripNote">
        <h3>豐富旅遊。精彩永續</h3>
        <p>歐洲的歷史建築，不再只是冰冷的石頭，<br>
        而是音槳家生命歷程的一部份，<br>
        放慢腳步用心來聽聽歐洲，<br>
        不再只是浮光掠影的表象，<br>
        讓瑰麗的片刻風景，成為生命中的永恆回憶。</p>
      </div>
    </div>
  </section>

 

// 一般設定=============================
*{padding: 0 ; margin: 0;}
ul,ol,li{list-style: none;}
a{text-decoration: none;}
body{
  font-family: 'FontAwesome',Verdana,'Microsoft JhengHei',sans-serif;
  font-size: 16px;
}

(1) web font 應用與 beforea、after偽元素結合

本網參考連結：【web font與icon font應用】、【icon font 與 before、after結合】

Awesom  CSS CND 連結【連結至】、【Awesome官網】

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

(2) 直書/橫書應用：

直書CSS參考：【參考1】、【參考2】

// 共用section元素設定=============================
.subtitle{
  h2{
    writing-mode: vertical-rl;   /* 直書設定*/
    /*文字美化*/
    margin-top: 40px;
    font-size: 20px; font-weight: bold; color:#364F6B;
    &:before,&:after{
      content: "\f072";
      padding: 0 20px; color:#FF549E; margin: 10px;
    }
  }//h2
} //.subtitle
.subicon{
  width: 80px; margin: 20px;
}//.subicon

 

(3) Flex應用： Flex CSS tools

// 共用section元素設定=============================
.subtitle{
   /*利用Flex 讓元表垂直置中*/
    display: flex; flex-direction: column; align-items: center;
}