Adding a clickable icon to footer code on "Thinkific"

Question

I am very new at coding and am trying to add a clickable icon to footer code on the website Thinkific. Thinkific allows html and javascript.

The icon I want to use is from the website "FlatIcon", and this is the link to the icon (https://www.flaticon.com/free-icon/philosophy_4576683?term=mindful&page=1&position=10&origin=search&related_id=4576683).

When the icon is clicked, I want it to lead to a course webpage on Thinkific, and I would prefer for the icon to appear in the centre of the footer (but this is not mandatory).

I started with this, but I get an error code saying "Named entity expected. Got none"

<!DOCTYPE HTML>.
<link rel="stylesheet" href="https://www.flaticon.com/free-icon/philosophy_4576683?term=mindful&page=1&position=10&origin=search&related_id=4576683">

I have also downloaded the icon and tried the following, but am getting an "Unexpected end tag (p). Ignored" message, and the footer is not showing up at all.

#footer {
    padding: 0 10px;
    background:#EEE;
    bottom:0px;
    right:0px;
    left:0px;
    position:fixed;
    box-shadow: 0px 0px 8px 0px #000000;

    }
    #footer p {
    margin: 0;
    padding: 10px 0;
}

<div id="footer">
     <p><center>Take a Break!</center>
<img style="float:right" src="./desktop/philosophy.png"  height="25" width="25"></p>
</div>

The "Take a Break!" is the text I would like to accompany the icon.

I have no idea how to make this work, or where to add the link to the webpage, so any help would be appreciated!

Also, this is my first post, so I apologize if it is messy/difficult to understand.

score 0 · Answer 1 · answered Mar 03 '23 at 05:11

You can make the icon clickable by creating a div and setting the background image to the icon you downloaded, and manipulate the action by creating a function and passing in the onclick property.

i.e:

function handleClick() {
   window.location.href = 'link-you-want-user-to-go'
}

<div class="div-class" onclick="handleClick()"></div>

CSS:

.div-class {
    background-image: url(path-to-image),
    height:40px
}

Adding a clickable icon to footer code on "Thinkific"

1 Answers1