စီးပွားရေး ဖုံးကြီး ဖုံးအုတ် ကို ဖွဲ့စည်း

စီးပွားရေး ဖုံးကြီး ဖုံးအုတ် ပုံစံ ပြုလုပ်ခြင်း

ပထမပိုင်း - ပုံစံ HTML အသုံးပြု

<!-- အက်ပ်အိမ်တွင်းတွင်း အက်ပ် -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- အက်ပ်ကို အသုံးပြု -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
...

ဒုတိယပိုင်း - ပုံစံ CSS အသုံးပြု

အထူးအတွက် နာရီဂြိုလ်ပြောင်း

/* အားလုံး Font Awesome အက်ပ်ကို အုတ်အော်ချင်း ပြင်ဆင် */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
/* လိုအပ်ခဲ့လျှင် လျှောက်လွှတ် အဖြစ်အပျက် ပြင်ဆင် */
.fa:hover {
  opacity: 0.7;
}
/* ခုနစ်မျိုး အမှတ်အသား အတွက် အဖြစ်အပျက် အသုံးပြု */
/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}
/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}

亲自试一试

နာရီဂြိုလ်ပြောင်း ဖြူ

အကြောင်းအရာပြင်ဆင် border-radius:50% အနေဖြင့် နာရီဂြိုလ်ပြောင်း ကို ဖွဲ့စည်းပြီး နာရီဂြိုလ်ပြောင်း width:

နာရီဂြိုလ်ပြောင်း

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

亲自试一试

相关按钮

教程：图标

教程：CSS 按钮