CSS Icons ဆိုတာ ဘာလဲ။
အိုင်ကွန်များသည် CSS ဖြင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်သော အရွယ်အစားရှိ vector libraries များဖြင့် လာပါသည်။
ဘုံစာကြည့်တိုက်များမှာ-
- Font Awesome Icons
- Bootstrap အိုင်ကွန်များ
- Google အိုင်ကွန်များ
ဘယ်လို?
<head>အိုင်ကွန်များကို အသုံးပြုရန်၊ သင်၏ HTML စာမျက်နှာ ၏ ကဏ္ဍရှိ အိုင်ကွန်ဒစ်ဂျစ်တိုက်သို့ လင့်ခ်တစ်ခုကို ပေါင်းထည့်လိုက်ရုံသာ ။
ဒေါင်းလုဒ်များ သို့မဟုတ် ထည့်သွင်းမှုများ မလိုအပ်ပါ။
အိုင်ကွန်တစ်ခုကို ထည့်သွင်းရန်၊ <i>သို့မဟုတ် ကဲ့သို့ မည်သည့် inline HTML ဒြပ်စင်သို့ အိုင်ကွန်အတန်း၏ အမည်ကို ထည့်ပါ <span>။
Font Awesome ဥပမာ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa
fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
အိုင်ကွန်များစာရင်း (Font Awesome၊ Bootstrap နှင့် Google) အပြည့်အစုံအတွက် W3School ၏ Icon ရည်ညွှန်း ချက်ကို ဝင်ရောက်ကြည့်ရှု ပါ။
Bootstrap နမူနာ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon
glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i
class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon
glyphicon-thumbs-up"></i>
</body>
</html>
Google ဥပမာ
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i
class="material-icons">favorite</i>
<i
class="material-icons">attachment</i>
<i
class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
အိုင်ကွန်များ ကျူတိုရီရယ် အပြည့်အစုံ
ဤသည်မှာ Icons ၏ အတိုချုံးဖော်ပြချက်ဖြစ်ပါသည်။
Icons သင်ခန်းစာအပြည့်အစုံအတွက် W3Schools Icons Tutorial သို့သွားပါ ။
Icons အကိုးအကားအပြည့်အစုံအတွက် W3Schools Icons Reference သို့သွားပါ ။