⟢ ∘ ｡ BOOTSTRAP ICONS ⦂ a public tutorial .
Added 2023-06-19 18:21:38 +0000 UTC⟡ ⟡ ⟡
ability level : very easy
relevant links : bootstrap icons
* most all of my recent codes have this script installed already but in case u are using an older code or something coded by another creator , u will need to ensure u have this script installed .
<head><link href="<a href=" https:="" rel="stylesheet"/></head><body>https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</body>
paste it before <style type="text/css"> but after <head> . with my themes , u can find it by searching for this line of text " <!-- various scripts : ie , icons and tooltip u will also place ur links to any google fonts here --> " and paste it below that .
step 1 : ensure that u have the bootstrap script installed as described above .
step 2 : find a cute icon in the massive sea of icons bootstrap has to offer ! for this tutorial , we're using the outline heart . click on the icon to pull up it's information .
step 3 : decide where ur going to put ur icon . in this case , we'll be adding it to our title .
step 4 : copy the icon font on the bootstrap page to ur clipboard . i have highlighted the area for u here .
step 5 : paste the font icon into ur title area where u normally type up ur title - no complicated editing required ! it's highlighted so u can see it clearly through the other coding .
step 6 : as u can see , the icon is styled using ' i class ' just which tells us it will follow the styling for italic font in the title . if u don't want it to be styled like that , here is how u can easily change it :
for icons that match the main title styling :
<span class="bi bi-heart-fill"></span>
for icons that match the bold title styling :
<b><span class="bi bi-heart-fill"></span></b>
