Disable a tag in HTML - html

Question

My question is quite simple. I made an .inactive class with no pointer-events.
I actually want to show that Prohibid symbol from glyphicon or whatever in red.
How can I achive this?
.inactive {
color: #ccc;
pointer-events: none;
cursor: default;
}
.nav-tabs > li {
background: #000;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">INACTIVE</li>
</ul>

Answer 1

You could add as the content of the after pseudoelement the U+233D symbol ( ⌽) rotated by 90 degrees
.inactive::after {
content: "\233D";
display: inline-block;
color: #D02124;
margin-left: .5em;
font-size: 1.5rem;
transform: rotateZ(90deg);
}

Answer 2

To change cursor on inacticve tab use red svg with icon on li element by adding this to css
li {
cursor: url("data:image/svg+xml;utf8, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}
li {
cursor: url("data:image/svg+xml;utf8, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}
.inactive {
color: #ccc;
pointer-events: none;
cursor: default;
}
.nav-tabs > li {
background: #000;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation" >INACTIVE</li>
</ul>
To generate svg from font go to http://fontello.com/ choose one icon and click on red upper button "Download webfont". Then unzip file and go to https://icomoon.io/app and click "Import icons" (button) and upload .svg file from that zip and select your icon and click (on page bottom) on "Generate svg and more". Then copy body of that svg file change/add proper size/ style (fill: red) inside it - and paste it to following script to get valid css url code:
let str = document.querySelector('.svgData').innerHTML;
let r = str
.replace('width="256" height="256" ', "")
.replace(/> +/g, ">")
.replace(/ +</g, "<")
.replace(/>/g, "%3E")
.replace(/</g, "%3C")
.replace(/>/g, "%3E")
.replace(/#/g, "%23")
.replace(/"/g, "'")
.replace(/ +/g, " ")
.replace(/^ +/g, "")
.split("\n")
.join("");
msg.innerHTML = `<pre>cursor: url("data:image/svg+xml;utf8,${r}");</pre><br>length: ${r.length} char`
<div style="display:flex">
<!-- PASTE you svg file inside div below -->
<div class="svgData">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32">
<title>block</title>
<path style="fill: red" d="M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z"></path>
</svg>
</div>
</div>
<div id="msg"></div>