توی این جلسه از دوره آموزش CSS میخوایم به بررسی درج کردن آيکون در وب سایت بپردازیم . مواقعی پیش میاد که ما میخوایم بیایم از آیکون ها توی وب سایتمون استفاده کنیم و بتونیم به اون آیکون ها رنگ های مختلف بدیم و یا بیایم سایزشون رو بزرگ کوچیک کنیم و از کیفیت اون ها چیزی کم نشه ! اینجا میایم از فونت آیکون ها به اصطلاح استفاده میکنیم .
راحت ترین روش استفاده هم ابتدا باید یک کتابخانه آیکون پیدا کنیم . معروف ترین های این کتابخانه ها Fontawesome – bootstrap – google و خیلی های دیگه هستند. اینجا روش استفاده از چندتا شون رو اشاره میکنیم.
آیکون های Fontawesome
برای اینکه بتونین از این کتابخانه استفاده کنین باید داخل سایت fontawesome بشین و کد مخصوص این کتابخانه رو دریافت کنین و کد دریافت شده رو داخل تگ head سایتتون قرار بدین و از طریق الگوی مثال زیر از این آیکون ها توی سایتتون استفاده کنین. نکته ای هم که وجود داره هیچی نمیخواد نصب کنین و یا دانلود کنین !
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous" defer></script>
</head>
<body data-rsssl=1>
<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>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
آیکون های Bootstrap
برای اینکه از کتابخانه فونت آیکون Bootstrap هم توی وب سایتتون استافده کنین کافیه کد زیر رو به قسمت تگ head وب سایتتون اضافه کنین و از مثال زیر الگو بگیرین :
<link data-minify="1" rel="stylesheet" href="https://bs-design.ir/wp-content/cache/min/1/bootstrap/3.3.7/css/bootstrap.min.css?ver=1711551449">
<!DOCTYPE html>
<html>
<head>
<link data-minify="1" rel="stylesheet" href="https://bs-design.ir/wp-content/cache/min/1/bootstrap/3.3.7/css/bootstrap.min.css?ver=1711551449">
</head>
<body data-rsssl=1>
<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
دقیقه مشابه کتابخانه های فونت بالا میتونین از کد زیر توی وب سایتتون استفاده کنین و اون رو داخل تگ head سایتتون درج کنین و ازش لذت ببرین :
<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 data-rsssl=1>
<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>
