JS-在其他網站上加入font awesone圖示的作法? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0

JS-在其他網站上加入font awesone圖示的作法?

javascript #javascript 你懂javascript嗎？ js

Oo_花之舞__oO 2022-06-13 19:53:38 ‧ 1184 瀏覽

分享至

我想要用tampermonkey插件或直接用chrome的debug(devtool)完成這個效果
目的是加上任意一個font awesome的圖示
作法是JS去appendchild link然後就把圖示丟進button裡面
依理論來說應該就可以看到圖

我已經在網頁上appendchild一個Btn了加入按鈕這部分沒問題
接下來就是加入圖示的部分

var awesome=`<i class="fa-solid fa-folder-plus"></i>`
//btn.innerHTML=awesome

//加上font-awesome的連結
const link=`<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Source+Serif+Pro:wght@200&display=swap" rel="stylesheet">
`
x=document.createElement('div')
x.innerHTML=link
document.head.appendChild(x)

同概念在自己的VSCODE上實測圖是可以顯示的
根據此方法要幫其他網頁上用js加一個有ICON的按鈕卻無法顯示
想請教該怎麼修正?

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2022-06-14 11:08:33 檢舉

tampermonkey要引入外部lib不能這麼引。跟他的沙盒模式有關。
你要用 @resource

https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg#_resource

Oo_花之舞__oO iT邦新手 1 級 ‧ 2022-06-14 20:35:22 檢舉

了解那在DEVtool上也無法操作要怎麼修正感恩~

froce iT邦大師 1 級 ‧ 2022-06-15 08:49:10 檢舉

找不到直接引入網路css的方法，或許你可以自己寫function把css下載回來，用下面的方法去引入。
https://web.dev/constructable-stylesheets/

froce iT邦大師 1 級 ‧ 2022-06-15 08:49:47 檢舉

不過用tampermonkey應該才是最簡便的。

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙