අපි Web Pages හදනකොට බොහෝ අවස්ථාවලට icons අවශය වෙනවා. ඒ වගේ වෙලාවට Google එකේ Search කරල icon එකක් හොයනවා කියන්නෙ ටිකක් කරදර කාරී වැඩක් වගේම වෙලායන වැඩක් සමහර වෙලාවට එහෙම කරලත් අපිට ගැලපෙන වර්ණයට ගැලපෙන Size එකට Icon එකක් හෙයා ගන්න බෑ.
ඉතින් අන්න ඒ නිසා මේකට විසදුමක් විදිහට ඔයාලට පුලුවන් font icons භාවිතා කරන්න.
- මොනවද මේ Font icons ?
සරලවම Font icon එකක් කියලා කියන්නේ symbols හා glyphs අඩංගුවන අකුරු ජාතියක් කිව්වොත් නිවැරෙදියි. ඉතින් මේ Font icon සාමාන්‍ය අපි භාවිතා කරන icon එකකට වඩා විශේෂ වෙන්න හේතුව තමයි මේ icons regular text එකක් එනම් සාමානය Text එකක් ආකාරයට CSS භාවිතයෙන් පහසුවෙන් හැසිරවිය හැකි වීමයි. ඒ කියන්නෙ Color වෙනස් කරන්න Shadows දාන්න වගේ දේවල් CSS හරහා පහසුවෙන්ම කරගන්න පුලුවන් වීමයි.
හරි අපි උදාහරණයක් බලමු
<span class="fas fa-book"></span>
මෙන්න මේ වගේ ඉතා කෙටි Code කොටසකින් ඔයාට පුලුවන් පොතක icon එකක් ඔයාගෙ වෙබ් අඩවියට දා ගන්න.
ඒ වගේම තමයි මේක කරන්න කලින් මුලින්ම Font Library එකක් ඔයාගෙ Project එකට install කරගන්න අවශයයි.
මම නිතරම භාවිතා කරන Free Use කරන්න පුලුවන් Font Library දෙකක් මෙතනදි කියන්නම්
- Fontawesome
- ionicons
ඔයා භාවිතා කරන්නෙ Fontawesome නම් ඔයාට පුලුවන් ඔයාගෙ Page එකේ <head> tag එක ඇතුලෙ
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
ඔය මම ඉහළින් දීල තියෙන Code එක Paste කරන්න.ඔන්න දැන් ඔයාට පුලුවන් Font Awesome එකේ Free දෙන Fonts නොමිලේම භාවිතා කරන්න.
කොහොමද icons Web Page එකට දාන්නේ?
<i class="fas fa-**xxx**"></i>
<span class="fas fa-**xxx**"></span>
ඔය මම උඩින් දීල තියෙන කැමති Tag එකක් Web Page එකේ කැමති තැනක Paste කරලා මම XXX ලෙස දීල තියෙන Text එක වෙනුවට මෙන්න මේ Link එකට ගිහින් තෝරගත්තු Font එකේ නම එතනට දාන්න
උදා- <i class="fas fa-book"></i>
ඉතින් ඔන්න ඔය විදිහට ඉතාමත් පහසුවෙන් ඔයාගෙ වෙබ් අඩවියට Icons දා ගන්න පුලුවන් ඒ වගේම
ඔය Icon එක දෙගුණයක්,තුන්ගුණයක් ලෙස විශාල කරගන්න පහත CSS Classes පාවිච්චි කරගන්න පුලුවන්
උදා- <i class="fas fa-book 2x"></i>
<i class="fas fa-book 3x"></i>
ඒ වගේම තමයි වෙනම Css Class මේකට එකතු කරන්නත් පුලුවන්
උදා-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
.my-icon{
color:red;
text-shadow: 3px 3px;
background-color: lightblue;
}
</style>
</head>
<body>
<i class="fas fa-car 2x my-icon"></i>
</body>
</html>
ඉතින් මීට අමතරව ඔයා පාවිච්චි කරන වෙනත් ක්‍රමවේද, Font Library ගැන වගේම ලිපිය ගැන අදහස් පහළි Comment කරන් යමු.
