我正在使用angular-fontawesome和datatables,我想在表格上创建一个按钮,但我想使用fontawesome放置一个图标而不是文本。我有以下代码:
this.dtOptions = {
//...
buttons: [
//...
{
extend: 'pdf',
text: '<fa-icon [icon]="faDownload"></fa-icon>'
}
]
};
我知道它不会以这种方式加载图标组件,但是有没有办法在不使用 fontawesome 的 css 的情况下做到这一点?
你应该这样说:
在字体真棒网站上,您可以选择要显示的图标,代码将出现在下面,您只需将其替换为 FA-ICON-ICON。例如,对于带有 PDF 图标的按钮,它将是:
如果您不使用 AngularCLI,您可以尝试其他方式:
一切顺利
你使用 PHP 吗?例如,这段代码是一个按钮/图标,当点击它时,它会显示一个修改数据的模式:
这是从表中删除记录
这里是确认是否要删除记录的模式
干杯
1 次 hack,1 次失败尝试和 1 次自定义 css
1.黑客
我们捕获图标的信息并“勉强”渲染它
app.component.ts
2. 工厂/喷油器不工作 =/
将按钮图标呈现为组件
app.components.js
button-download.component.ts
向模块中添加导入、声明和入口组件
app.module.ts
理论上它应该渲染整个东西,但它不够:
3 自定义 CSS
我们定义了一个伪装成 fontawesome 的 CSS 类,因此我们可以将
<i class="fe fe-download"></i> Download
, 放在按钮文本中。您可以将其直接放在 app.component.css 中,也可以使用您的 css 注入一个组件。
我给你第二个选项,它是提案2的变体
我们得到 svgPathData、宽度和高度
我们在组件的 css 中放置了一个 svg
button-download.component.css
我们更新组件模板
button-download-component.ts
后者的优点是你可以省去组件中的 fontawesome(如果你也全局清理应用程序),它基本上是手动完成最终包的“摇树”。
注意 如果有人能弄清楚为什么方法 2 不起作用(或者如果它是一个错误),我会对如何修复它非常感兴趣。我的印象是它隐含在这个问题中,这就是我不打开另一个问题的原因。
您可以在您的 css 中加载 font-awesome 的字体并“手动”插入字符(这基本上是 FA css 所做的,加载字体并使用 :before 插入字符),但这会效率低下,因为您将加载许多您不会使用的图标。如果您只打算使用一些,您可能对将它们输入为 svg 向量更感兴趣,这样您就可以将它们更改为您需要的颜色和大小。这是 svg 和 png 格式的很棒的图标列表
https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black