Search code examples
htmljupyter-notebookmarkdownalert

Add icon in alert-block in Jupyter notebook

I would like to add a warning or note icon in an alert-block in Jupyter notebook. To create an alert-block in Jupyter notebook we could use the following code:

<div class="alert alert-block alert-info">
<b>Tip:</b> Use blue boxes (alert-info) for tips and notes. 
If it’s a note, you don’t have to include the word “Note”.
</div>

Output:

enter image description here

Now I could like to add an icon. In this question it is discussed to add icon in markdown in GitHub. We may use then the syntax :warning:. This unfortunately doesn't work in Jupyter notebook:

<div class="alert alert-block alert-info">
:warning: Use blue boxes (alert-info) for tips and notes. 
If it’s a note, you don’t have to include the word “Note”.
</div>

Output:

enter image description here

As you can see this doesn't work. So I was wondering if anyone knows how to add an icon to an alert-block in Jupyter notebook?

Solution

  • It does work, but that is only a representation of you needing to copy and paste the symbol, hence the '(just copy paste)' note there where you indicated.

    Edited version of your code for the markdown to be in the cells:
    > ⚠️ **If you are using mobile browser**: Be very careful here

    <div class="alert alert-block alert-info">
⚠️ Use blue boxes (alert-info) for tips and notes. 
If it’s a note, you don’t have to include the word “Note”.
</div>
    Image of result:

    enter image description here

    Test temporary Jupyter session, with no login needed, provided via the MyBinder service from here.