Javascript 将引导图示符图标插入网页而不覆盖网页类

我正在使用chrome.tabs.executeScript（）函数（和jQuery）将一个按钮插入到用户的网页中。最初，我使用

标记将整个引导库导入页面，以便在按钮中使用图标：

<style>
  @font-face {
    font-family: 'Glyphicons Halflings';

    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot');
    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff2') form      ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url      ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .glyphicon-heart:before {
    content: "\e005";
  }
  .glyphicon-heart-empty:before {
    content: "\e143";
  }
</style>

@字体{
字体系列：“字形图标半身人”；
src:url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot');
src:url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot?#iefix“”格式（'embedded-opentype'），url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff2“）表格（”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff“）格式（'woff'），url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.ttf“”格式（'truetype'），url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular格式（'svg'）；
}
.字形图标{
位置：相对位置；
顶部：1px；
显示：内联块；
字体系列：“字形图标半身人”；
字体风格：普通；
字体大小：正常；
线高：1；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
.心：以前{
内容：“\e005”；
}
.心空：之前{
内容：“\e143”；
}

我从bootstrap.css文件复制了这个文件，并且必须替换几个

src:url（'../font/glyphicons-halflings-regular.eot'）

“注入”按钮如下所示：
虽然看起来应该是这样的：
您的css定义字体时有一些错误

这是工作版本

  @font-face {
    font-family: 'Glyphicons Halflings';

    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot');
    src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff') format('woff'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .glyphicon-heart:before {
    content: "\e005";
  }
  .glyphicon-heart-empty:before {
    content: "\e143";
  }

请注意，默认情况下，仅加载默认脚本和对象资源。显然，字体文件是外部资源，因此您可以：

通过更新内容安全策略来放松默认策略

：

"content_security_policy": "script-src 'self'; object-src 'self' https://maxcdn.bootstrapcdn.com"

（推荐）制作引导文件的本地副本，并使用本地路径更新字体文件src

---

即使在您提出的更改之后，我仍然看到一个代码，而不是实际的glyphicon。虽然您的解释有道理，但实际上这两种方法都不起作用。仍然看到符号代码而不是符号itself@GabeO'Leary，如果您使用第二种方式，您应该下载整个引导程序，因为字体图标对css文件和字体文件之间的相对路径有一定的依赖性。