正文 

当前位置： 首页 > 问答 >

如何在 Primefaces DataTable 中使用 Font Awesome（或其他字体图标）而不是 jQuery sprite？

     2023-02-23     121

关键词：

【中文标题】如何在 Primefaces DataTable 中使用 Font Awesome（或其他字体图标）而不是 jQuery sprite？【英文标题】：How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable? 【发布时间】：2016-04-23 16:55:28 【问题描述】：

我正在使用 PrimeFaces 生成数据表。默认排序图标是来自 JQuery 库的 V 形，但由于它们不是 Vector，它们看起来很难看。我不想用字体真棒之类的字体替换它们，但我不知道如何做到这一点。 下面的 CSS 句柄我可以用来将图像更改为不同的精灵等。

如果我能以某种方式将 primefaces 添加的类从 ui-icon-triangle-1-n 更改为 af fa-sort-alpha-desc，例如，我已经得到帮助。 

.ui-state-default .ui-icon
        background-image: url("../Assets/images/jquery-ui/ui-    icons_0072b6_256x240.png");
    
    .ui-datatable .ui-icon-carat-2-n-s 
    background-position: -160px 0 !important;


.ui-datatable .ui-icon-triangle-1-n
    background-position: 0 -48px !important;


.ui-datatable .ui-icon-triangle-1-s
    background-position: -64px -48px !important;

【问题讨论】：

您可以使用 jQuery 轻松操作类。如果这还不够，您必须修补 PrimeFaces 源 【参考方案1】：

我最终得到了DataTable 的这段 CSS：

.ui-datatable .ui-sortable-column-icon.ui-icon 
    background-image: none; text-indent: 0; margin: 0 0 0 .5em;

.ui-paginator > span:before, .ui-sortable-column-icon:before 
    font-family: FontAwesome; color: #fff;

.ui-paginator > span > span, .ui-paginator a span  display: none; 
.ui-paginator-first:before  content: '\f049'; 
.ui-paginator-prev:before  content: '\f048'; 
.ui-paginator-next:before  content: '\f051'; 
.ui-paginator-last:before  content: '\f050'; 
.ui-icon-carat-2-n-s:before  content: '\f0dc'; 
.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before  content: '\f0de'; 
.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before  content: '\f0dd'; 
.ui-paginator .ui-state-disabled  opacity: .25;

所有的 unicode 都可以在这里找到：http://fontawesome.io/cheatsheet/

Font Awesome 提供了一些替代图标：

 fa-sort-alpha-asc \f15d  fa-sort-alpha-desc \f15e  fa-sort-amount-asc \f160  fa-sort-amount-desc \f161  fa-sort-numeric-asc \f162  fa-sort-numeric-desc \f163

更新

在为我的主题做了一些 CSS 覆盖并考虑了 Kukeltje 的评论后，我决定将 JSF ResourceHandler 添加到 theme I'm working on 是一个好主意。

只需将依赖项添加到您的项目并添加资源处理程序

<application>
    <resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler>
</application>

处理程序将检测 PrimeFaces 主题并修补 CSS。它删除了 jQuery UI 图标并添加了Font Awesome rules（其中包括一个单独的icon mapping SCSS）。

【讨论】：

酷，感谢发帖。也许我会联系 PF 的人写一篇关于这个的博客。或者让他们创建一个自定义 css，当您在 web.xml 中打开配置并将其用于 所有 PF 组件 酷...现在下一步是也能够将基于图像的checkbox图标更改为基于字体的真棒文本图标radiobutton，用于不带图像的打印（以及主题一致性）。顺便说一句，“它们看起来过时了 CSS 过于复杂 图标是位图” 最后一个是正确的。第一个和第二个仅用于免费主题，而不是 [这些]，他们使用“少”（你呢？）。也许我们应该创建一个...... 是的，我指的是默认/免费主题（将更新自述文件）。单选按钮、复选框、选择列表和日历已经被处理（见 CSS 补丁的底部）。我也在开发一个免费的主题。 明天我会添加主题 CSS（我目前所拥有的） 我查看了 PrimeFaces 展示，测试了补丁并在 CSS 中做了一些调整【参考方案2】：

这是一个例子：

.ui-paginator-first.ui-state-default.ui-corner-all:before
    content: "\f049";
    font-family: FontAwesome;
    color: white;

您可以在 font-awesome 网站 http://fortawesome.github.io/Font-Awesome/icon/pencil/ 中找到您不能为内容添加的代码，而不是 "\f049"

:before 在 css 类后面很重要

【讨论】：

PrimeFaces DataTable 中的 filterMatchMode 是如何工作的？

】PrimeFacesDataTable中的filterMatchMode是如何工作的？【英文标题】：HowitworksthefilterMatchModefromPrimeFacesDataTable?【发布时间】：2011-10-0323:02:08【问题描述】：PrimefacesDatatable允许您使用属性filterMatchMode配置用于列的过滤类型。不过，如果... 查看详情

将 primefaces 数据表与 org.primefaces.component.datatable.DataTable 绑定；

】将primefaces数据表与org.primefaces.component.datatable.DataTable绑定；【英文标题】：BindingprimefacesdataTablewithorg.primefaces.component.datatable.DataTable;【发布时间】：2012-04-0802:09:28【问题描述】：我有一个关于primefaces数据表组件的问题。我想... 查看详情

Primefaces dataTable过滤日期

】PrimefacesdataTable过滤日期【英文标题】：PrimefacesdataTablefilteringwithdate【发布时间】：2013-12-0413:56:51【问题描述】：我遇到了一个特殊的问题。我有一个数据表，我想在其中过滤primefaces中的日期。当我使用<p:columnid="date"headerText... 查看详情

Primefaces DataTable 的特定于列的上下文菜单

】PrimefacesDataTable的特定于列的上下文菜单【英文标题】：Column-specificcontextmenuforPrimefacesDataTable【发布时间】：2013-01-1602:22:03【问题描述】：如何在Primefaces数据表中为每一列定义不同的上下文菜单？将&lt;p:contextMenu&gt;放入&a... 查看详情

PrimeFaces DataTable：例如，如何使用 var="item" 作为获取 rowStyle 的变量？

】PrimeFacesDataTable：例如，如何使用var="item"作为获取rowStyle的变量？【英文标题】：PrimeFacesDataTable:howtouseavar="item"asavariableingettingrowStyleforexample?【发布时间】：2011-11-1502:58:34【问题描述】：我是说这个。我有一个带... 查看详情

BLOB 图像仅在通过 p:dataTable 在 PrimeFaces 中进行更新后刷新页面时显示

】BLOB图像仅在通过p:dataTable在PrimeFaces中进行更新后刷新页面时显示【英文标题】：BLOBimagesaredisplayedonlyonrefreshingapageafteranupdateviap:dataTableismadeinPrimeFaces【发布时间】：2014-07-1918:05:03【问题描述】：我在&lt;p:graphicImage&gt;上显... 查看详情

为 Datatable primefaces 设置列宽

】为Datatableprimefaces设置列宽【英文标题】：settingColumnwidthforDatatableprimefaces【发布时间】：2012-06-2319:22:21【问题描述】：在设置数据表的列宽时需要一些帮助。但是，数据表的宽度似乎并不统一。数据表中列的宽度，似乎因列标... 查看详情

Primefaces：从p：dataTable中的行选择中排除列

】Primefaces：从p：dataTable中的行选择中排除列【英文标题】：Primefaces:Excludecolumnfromrowselectioninp:dataTable【发布时间】：2013-01-3012:18:12【问题描述】：p:dataTable有问题，从单行选择中排除一列。我的数据表中有4列。需要前3个来显示f... 查看详情

PrimeFaces Datatable 不显示任何样式

】PrimeFacesDatatable不显示任何样式【英文标题】：PrimeFacesDatatabledoesnotshowanystyle【发布时间】：2014-05-0619:37:14【问题描述】：这是我的“数据表”。“角色”和“活动”是我的标题，“管理员”和“+”是内容（一行）。这个数据... 查看详情

Primefaces DataTable、延迟加载和每行命令按钮

】PrimefacesDataTable、延迟加载和每行命令按钮【英文标题】：PrimefacesDataTable,lazyloadingandCommandButtonperrow【发布时间】：2012-08-0818:27:41【问题描述】：我有这个简单的页面：<h:formid="form"><p:dataTablevalue="#testBean.unitTypeModel"var="elem... 查看详情

如何在 p:dataTable 中使用 p:graphicImage 和 StreamedContent？ [复制]

...te]【发布时间】：2012-01-0810:49:00【问题描述】：我想使用PrimeFaces数据表从数据库中动态加载图像。基于thisPFforumtopic的代码如下所示：< 查看详情

Primefaces 链接打开电子邮件撰写窗口

】Primefaces链接打开电子邮件撰写窗口【英文标题】：Primefaceslinkopenanemailcomposewindow【发布时间】：2012-02-0402:12:18【问题描述】：使用JSF-Primefaces如何在dataTable列上为emailId创建链接，以便onclick将打开电子邮件撰写窗口？我将Primefac... 查看详情

Primefaces 动态列不适用于延迟加载

】Primefaces动态列不适用于延迟加载【英文标题】：PrimefacesDynamiccolumnsnotworkingwithlazyloading【发布时间】：2014-12-2013:47:14【问题描述】：我正在使用PF5.0、JSF2.0(Mojarra)、SpringWebflow2.3。我在使用Datatable延迟加载时遇到了多个问题。a.)... 查看详情

使用jsf（primefaces）将数据从excel复制并粘贴到datatable

我想使用JSF（Primefaces）将数据从Excel复制并粘贴到Datatable。请建议我实现复制和粘贴的可能性。答案您可以侦听dataTableprimefaces对象的粘贴事件并从事件对象获取剪贴板数据，将数据格式化为JSONobject（在我使用JSONArray的示例中）... 查看详情

使用commandButton Primefaces 3.4从dataTable内部提交表单时selectOneMenu null

】使用commandButtonPrimefaces3.4从dataTable内部提交表单时selectOneMenunull【英文标题】：selectOneMenunullwhensubmitformfrominsidedataTablewithcommandButtonPrimefaces3.4【发布时间】：2012-09-2521:28:16【问题描述】：我在dataTable的页脚中有selectOneMenu，我正... 查看详情

PrimeFaces 3.0 - <p:dataTable> 标题不与使用 scrollable="true" 对齐

】PrimeFaces3.0-<p:dataTable>标题不与使用scrollable="true"对齐【英文标题】：PrimeFaces3.0-<p:dataTable>headersdonotlineupwithusingscrollable="true"【发布时间】：2011-09-2602:10:42【问题描述】：我有一个使用PrimeFaces3.0组件的JSF 查看详情

Primefaces 数据表重置分页

】Primefaces数据表重置分页【英文标题】：Primefacesdatatableresetpagination【发布时间】：2013-08-2819:23:48【问题描述】：我在搜索实用程序中使用带有分页器的dataTable组件，它运行良好，但在将分页器页面重置为第一页时出现问题。例... 查看详情

标题中带有垂直文本的 DataTable

...【发布时间】：2011-08-0216:31:38【问题描述】：是否可以在primefaces数据表中更改分面标题的方向？基本上我想要这样的东西：http://www.primefaces.org/showcase/ui/datatableBasic.jsf但要垂直书写模型/制造商/年份/颜色（但表格中的所有文本 查看详情