Search code examples
semantic-ui

how to handle icon on click with semantic UI

I am using semantic UI to create a basic front end and I am adding an icon as follows:

<div class="ui one column grid">
        <div class="column">
            <div class="ui basic segment center aligned">
                <i class="link home big icon"></i>
                
            </div>
        </div>
</div>

Now what I want to do is be able to call a function when the user clicks the icon in the segment. I tried to do something by simply adding:

<script>
     alert("Clicked");
</script>

assuming this would connect with the basic click handler but this does not seem to get invoked.

Solution

  • You can use function and add onClick even handler to trigger the function,

    function handleClick(){
    alert("Clicked");
};

    assuming you want to click

    <i class="link home big icon"></i>

    you can do

    <i class="link home big icon" onClick="handleClick()"></i>