CSS အိုင်ကွန်များ
အိုင်ကွန်ဒစ်ဂျစ်တိုက်ကို အသုံးပြု၍ သင်၏ HTML စာမျက်နှာသို့ အိုင်ကွန်များကို အလွယ်တကူ ထည့်နိုင်သည်။
Icons ထည့်နည်း
သင်၏ HTML စာမျက်နှာသို့ အိုင်ကွန်တစ်ခုထည့်ရန် အရိုးရှင်းဆုံးနည်းလမ်းမှာ Font Awesome ကဲ့သို့သော အိုင်ကွန်ဒစ်ဂျစ်တိုက်တစ်ခုဖြစ်သည်။
သတ်မှတ်ထားသော အိုင်ကွန်အတန်း၏ အမည်ကို inline HTML ဒြပ်စင် (ကဲ့သို့ <i>
သို့မဟုတ်
<span>
) တွင် ထည့်ပါ။
အောက်ဖော်ပြပါ အိုင်ကွန်ဒစ်ဂျစ်တိုက်များရှိ အိုင်ကွန်များအားလုံးသည် CSS (အရွယ်အစား၊ အရောင်၊ အရိပ်စသည်ဖြင့်) စိတ်ကြိုက်ပြင်ဆင်နိုင်သော အရွယ်အစားရှိ vector များဖြစ်သည်။
Font Awesome Icons
Font Awesome အိုင်ကွန်များကို အသုံးပြုရန်၊
fontawesome.com<head>
သို့သွားပြီး၊ အကောင့်ဝင်ပြီး သင်၏ HTML စာမျက်နှာ ၏ ကဏ္ဍတွင် ထည့်သွင်းရန် ကုဒ်တစ်ခု ရယူပါ -
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
ကျွန်ုပ်တို့၏ Font Awesome 5 သင်ခန်းစာ တွင် Font Awesome ဖြင့် စတင်နည်းကို ပိုမိုဖတ်ရှုပါ ။
မှတ်ချက်- ဒေါင်းလုဒ်ဆွဲခြင်း သို့မဟုတ် ထည့်သွင်းခြင်း မလိုအပ်ပါ။
ဥပမာ
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
ရလဒ်:
Font Awesome အိုင်ကွန်များအားလုံး၏ အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Icon Reference သို့ ဝင်ရောက်ကြည့်ရှု ပါ။
Bootstrap အိုင်ကွန်များ
<head>
Bootstrap glyphicons ကိုအသုံးပြုရန်၊ သင်၏ HTML စာမျက်နှာ ၏ ကဏ္ဍအတွင်းတွင် အောက်ပါစာကြောင်းကို ထည့် ပါ။
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
မှတ်ချက်- ဒေါင်းလုဒ်ဆွဲခြင်း သို့မဟုတ် ထည့်သွင်းခြင်း မလိုအပ်ပါ။
ဥပမာ
<!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 အိုင်ကွန်များ
Google အိုင်ကွန်များကို အသုံးပြုရန်၊ <head>
သင်၏ HTML စာမျက်နှာ၏ ကဏ္ဍ အတွင်းတွင် အောက်ပါစာကြောင်းကို ထည့်ပါ။
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
မှတ်ချက်- ဒေါင်းလုဒ်ဆွဲခြင်း သို့မဟုတ် ထည့်သွင်းခြင်း မလိုအပ်ပါ။
ဥပမာ
<!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>
ရလဒ်:
အိုင်ကွန်များအားလုံး၏စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ Icon ကျူတိုရီရယ် သို့ ဝင်ရောက်ကြည့်ရှုပါ ။