W3.CSS အိုင်ကွန် များ
အိုင်ကွန် စာကြည့်တိုက်များ
W3.CSS ဖြင့် သင်နှစ်သက်သော အိုင်ကွန်ဒစ်ဂျစ်တိုက်ကို အသုံးပြုနိုင်သည်။
- Font Awesome Icons
- Google Material Design အိုင်ကွန်များ
- Bootstrap အိုင်ကွန်များ
Icon Library ကို အသုံးပြုခြင်း။
အိုင်ကွန်တစ်ခုထည့်သွင်းရန်-
- <head> ကဏ္ဍတွင် CDN (Content Delivery Network) မှ အိုင်ကွန်စာကြည့်တိုက်ကို ထည့်သွင်းပါ။
- အိုင်ကွန်အတန်း၏အမည်ကို inline HTML ဒြပ်စင်တစ်ခုခုတွင် ထည့်ပါ။
အကြံပြုချက်- အိုင်ကွန်များထည့်ရန် <i> နှင့် <span> ဒြပ်စင်များကို တွင်တွင်ကျယ်ကျယ် အသုံးပြုပါသည်။
အိုင်ကွန်၏ အရွယ်အစားကို ထိန်းချုပ်ရန်၊ အိုင်ကွန်၏ ဖောင့်အရွယ်အစား ပိုင်ဆိုင်မှုကို ပြောင်းလဲပါ သို့မဟုတ် w3- အရွယ်အစား အတန်းအစားများထဲမှ တစ်ခုကို အသုံးပြုပါ-
- w3 သေးသေးလေး
- w3-အသေး
- w3-ကြီး
- w3-xxlarge
- w3-xxxlarge
- w3-ဂျမ်ဘို
Font Awesome Icons အချို့
fa fa-hom
fa-ဘားများ
fa fa-မြှား-ဘယ်ဘက်
fa fa-မြှား-ညာဘက်
fa fa-ရှာဖွေရေး
fa fa- အနီးကပ်
fa fa-refresh
fa fa-အမှိုက်
နာကျင်စေတယ်။
fa fa-ကား
fa fa-ထရပ်
fa fa-လေယာဉ်
ဥပမာ
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
အိုင်ကွန်များစာရင်း အပြည့်အစုံအတွက်- ကျွန်ုပ်တို့၏ အိုင်ကွန် ရည်ညွှန်းချက်ကို ဝင်ရောက်ကြည့် ရှုပါ။
Google Material Design Icons အချို့
အိမ်
အိမ်
အိမ်
မီနူး
မီနူး
မီနူး
arrow_back
arrow_back
arrow_back
မြှား_ရှေ့သို့
မြှား_ရှေ့သို့
မြှား_ရှေ့သို့
ရှာဖွေ
ရှာဖွေ
ရှာဖွေ
အနီးကပ်
အနီးကပ်
အနီးကပ်
ပြန်လည်ဆန်းသစ်ပါ။
ပြန်လည်ဆန်းသစ်ပါ။
ပြန်လည်ဆန်းသစ်ပါ။
ဖျက်ပါ။
ဖျက်ပါ။
ဖျက်ပါ။
လူ
လူ
လူ
လမ်းညွှန်_ကား
လမ်းညွှန်_ကား
လမ်းညွှန်_ကား
local_shipping
local_shipping
local_shipping
local_လေဆိပ်
local_လေဆိပ်
local_လေဆိပ်
ဥပမာ
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
အချို့သော Bootstrap အိုင်ကွန်များ
အိမ်
မီနူး ဟမ်ဘာဂါ
arrow_back
မြှား_ရှေ့သို့
ရှာဖွေ
ဖယ်ရှားပါ။
ပြန်လည်ဆန်းသစ်ပါ။
အမှိုက်
အသုံးပြုသူကို
ဖိုင်
ပုံနှိပ်
လေယာဉ်
ဥပမာ
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>