当前位置: 首页 > 面试题库 >

使用“真棒字体”图标作为要点,并带有单个列表项元素

陈富
2023-03-14
问题内容

我们希望能够使用Font Awesome图标作为CMS中无序列表的项目符号。

CMS上的文本编辑器仅输出原始HTML,因此无法添加其他元素/类。

这意味着在标记看起来像这样时显示图标:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

我可以看到的第一个问题是Font Awesome是否需要一个不同的font-family属性,而这需要一个单独的元素。

使用纯CSS是否可能?还是我必须使用类似jQuery的元素将其附加到每个列表项的开头?

我知道我们可以使用背景图像的后备,但如果可能的话,最好使用Font Awesome。


问题答案:

解:

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}


 类似资料:
  • 我意识到我们可以使用背景图像的后退,但如果可能的话,使用字体Awesome将是很好的。

  • 问题内容: 我有一些看起来像这样的CSS: 我想用Font Awesome中的图标替换图像。 无论如何,我看不到将CSS中的图标用作背景图片。假设在我的CSS之前加载了Font Awesome样式表/字体,是否可以这样做? 问题答案: 您不能将文本用作背景图像,但是可以使用或伪类将文本字符放置在所需的位置,而不必添加各种杂乱的额外标记。 确保在您的实际文本包装器上进行设置,以便定位。 编辑: Fo

  • 问题内容: 可以在Swing应用程序中使用Font Awesome吗?如果可能的话,那么如何将其图标与Swing组件(JButton或JLabel)一起使用。我之前在Primefaces应用程序中使用过Font Awesome。 问题答案: 在http://jiconfont.github.io/尝试jIconFont(Swing或JavaFX) 例:

  • 我在一些项目上使用字体真棒,但我有一些事情,我想用字体真棒图标做,我可以很容易地调用这样的图标: 所有图标是否可能始终处于带边框的圆形中?像这样,我有一张照片: 使用 会产生效果,但问题是图标总是比旁边的文本或元素大,有什么解决方案吗?

  • 问题内容: 我尝试将插入号向下图标添加到多个选项的第一个选择中,如下图所示: 我无法在上方的小提琴上看到该图标。 以及相应的代码: 问题答案: 您可以简单地将FontAwesome图标添加为所选下拉菜单作为文本。您只需要CSS中的一些东西,FontAwesome CSS和unicode。例如: 单击图标可找到unicode:Fontawesome 更新:从Github问题开始,将multiple属

  • 我想静态旋转我的字体图标45度。网站上说: 要任意旋转和翻转图标,请使用fa-roate-*和fa-fllip-*类。 但是, 不起作用,而将替换为起作用。这是否意味着它们实际上不能任意旋转?