// ==UserScript==
// @name Name
// @description Description
// @author You
// @version 0.1
// @match https://mysite*
// @resource customCSS https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css
// @require http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js
// @grant GM_addStyle
// @grant GM_getResourceText
// ==/UserScript==
//--- The @grant directive is used to restore the proper sandbox.
var newCSS = GM_getResourceText ("customCSS");
GM_addStyle (newCSS);
$("#somediv").before ( `
<div style="
background-color: white;
height: 150px;
box-shadow: inset 0px 0px 8px rgba(0,0,0,0.2);
border-radius: 5px;
margin-top: 15px;
border: 1px solid lightgray;
">Test
<i class="fa fa-circle"></i>
</div>` );
I can see Bootstrap is working and also my div is showing but I can never make font-awesome work. Tried different versions, but still. I am familiar with font-awesome and have been using the kit for some time but cannot make this work using Tampermonkey. Any suggestions?
After some modifications I am seeing a square instead of the icon:
