I am very new to Jupyter Notebooks, so sorry if I use the wrong lingo. There are some small icons I want to use inline in some text in a markdown cell of my Jupyter Notebook. I have figured out to add them as img html tags like so:
* <img src="img/icon/access-icon.png" class="adv-icon"/> **<E-Mesh SCADA> Logical Access** is an access
To do that, I’ve added a code block at the top of my document that reads:
`%%html
img.adv-icon {
height: 16px;
display: inline;
}
`
However, I don’t want that block to be visible when we print or export the HTML. So I tried to add this to the cell’s metadata:
{ "tags": [ "remove_input", ] }
This appears to not have any effect. Can you make some suggestions?
There are also different approaches to integrating icons into your notebook. You can use the version 4 of Font awesome icons with code such as:
<i class="fa-folder fa" style="font-size: 22px;color:#666;"></i>
There is a way to integrate any svg icon here. You can now skip step#1 as highlighted in the comments below it. It can be tricky to work out because you have to encode the svg, but you can also change the size and color directly in the code.
However, if you are happy with what you are using (for example, maybe you have better downstream rendering in your HTML with that approach), these extensions might help you hide the specific code cell:
To optionally hide parts of cells, I like hide_code extension, by kirbs because it offers a lot of control and gets respected in the HTML or PDF output if you install the needed parts right and use the special buttons or menu choices the extension adds. You can test it out in active sessions by clicking on the launch binder badge here. There is also Hide Input that allows you to set the meta data hide_input in a cell. You get that extension if you install the community nbextensions with pip install jupyter_contrib_nbextensions, as shown here. Then you need to enable the extension. The easiest route is the Nbextensions configuration page, see here.