如何在页面中使用Font Awesome字体图标

Posted 2023-04-28

参考技术A ①首先，需要有这么个"图标主体"库
②其次，把这个"图标字体"库,引入html页面(是图标字体库对应的css引入html)
③最后，使用"图标字体"库
具体操作：
制作"图标字体"：
①这里以http://www.iconfont.cn为例子，来制作:
首先，打开网址后，页面右侧有登录按钮，先进行登录操作(后面会说明外面为什么选择登录，也可以不登录。但我还是建议登录。)
②制作图标，这个制作的图标是要svg格式的可以找自己公司的设计师去设计，也可以在里面的图标库搜索自己需要的图标的名称，比如"首页，分类"等。

③ 点击自己选择的首页和分类，它会在这个位置出现：

④然后点击下载到本地，就自动下载一个叫"iconfont.zip"的压缩包。这个就是图标字体库。解压这个压缩包可以发现有这些文件：

1部分是指图标内容，可以忽略，但不能删除

2部分是指图标css，不能删除
3部分是使用图标的示例dome，可以删除(建议保留)
⑤使用图标：
打开dome.html,在浏览器中可以看到，相关的下载的图标，以及如何使用。这里可以我提一下，使用图标有2中方式，1是以内容的形式使用，2是以css 的形式使用：

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

【中文标题】如何在 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 类后面很重要