用CSS替换带有图标的文本

用户名

我想使用字体超棒的图标来自动生成标记,因此无法更改。

以下标记将显示该ol列表。我想用图标代替数字。

<ol class="flex-control-nav">
    <li><a class="flex-active">1</a></li>
    <li><a class="">2</a></li>
    <li><a class="">3</a></li>
    <li><a class="">4</a></li>
    <li><a class="">5</a></li>
</ol>

这是我正在尝试的:

.flex-control-nav a:before  { 
    font-family: FontAwesome; 
    font-size: 30px; 
    display: inline-block; 
    content: '\f137';
}

问题:

使用上面的代码,我可以在每个列表项中显示图标,但是数字也在那里。我想隐藏数字。我尝试使用text-indent,但是也删除了图标。

阿夫拉罕库尔

只需使用

.flex-control-nav a
{
    font-size:0;
}

这是一个工作小提琴

要么:

.flex-control-nav a
{
    visibility: hidden;
}
.flex-control-nav a:before
{
    visibility: visible;
}

这是一个工作小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

用CSS替换带有图标的文本

来自分类Dev

图释,带有原始文本的textarea和带有替换图标的textfield

来自分类Dev

带有 FontAwesome 图标的中心文本

来自分类Dev

两侧带有图标的文本编辑

来自分类Dev

带有左图标的按钮和文本完美对齐

来自分类Dev

Java:带有文本和图标的JLabel

来自分类Dev

如何使文本适合带有图标的圆形按钮

来自分类Dev

在 Xamarin 表单中显示带有图标的文本

来自分类Dev

带有符号图标的单击事件

来自分类Dev

如何输出带有图标的标签?

来自分类Dev

带有图标的弹出菜单

来自分类Dev

如何输出带有图标的标签?

来自分类Dev

带有图标的弹出菜单

来自分类Dev

带有div按钮内的图标的垂直居中文本

来自分类Dev

WPF中带有图像图标的文本框

来自分类Dev

如何将带有字体超赞5图标的文本对齐?

来自分类Dev

是否可以在ListView中显示带有文本+图标的行?

来自分类Dev

带有div按钮内的图标的垂直居中文本

来自分类Dev

显示带有字体真棒图标的<hr>标签和文本,并与响应行为内联

来自分类Dev

带有文本和图标的 Android 警报对话框

来自分类Dev

如何借助CSS在HTML中显示带有文本的图标?

来自分类Dev

如何借助CSS在HTML中显示带有文本的图标?

来自分类Dev

如何使用React Native CSS实现带有2个图标的破折号

来自分类Dev

带有分组图标的input-group-addon / font-awesome文本框的边框混乱

来自分类Dev

根据SQLite数据库数据创建带有文本和收藏夹图标的ListView

来自分类Dev

如何在jQuery数据表上添加带有搜索图标的占位符文本

来自分类Dev

Flutter如何创建右图带有两个图标的文本框,与图像中的一样?

来自分类Dev

在带有 CSS 的文本之前显示 Bootstrap 图标显示代码而不是图标

来自分类Dev

带有文本,图标,文本的ActionBar菜单

Related 相关文章

  1. 1

    用CSS替换带有图标的文本

  2. 2

    图释,带有原始文本的textarea和带有替换图标的textfield

  3. 3

    带有 FontAwesome 图标的中心文本

  4. 4

    两侧带有图标的文本编辑

  5. 5

    带有左图标的按钮和文本完美对齐

  6. 6

    Java:带有文本和图标的JLabel

  7. 7

    如何使文本适合带有图标的圆形按钮

  8. 8

    在 Xamarin 表单中显示带有图标的文本

  9. 9

    带有符号图标的单击事件

  10. 10

    如何输出带有图标的标签?

  11. 11

    带有图标的弹出菜单

  12. 12

    如何输出带有图标的标签?

  13. 13

    带有图标的弹出菜单

  14. 14

    带有div按钮内的图标的垂直居中文本

  15. 15

    WPF中带有图像图标的文本框

  16. 16

    如何将带有字体超赞5图标的文本对齐?

  17. 17

    是否可以在ListView中显示带有文本+图标的行?

  18. 18

    带有div按钮内的图标的垂直居中文本

  19. 19

    显示带有字体真棒图标的<hr>标签和文本,并与响应行为内联

  20. 20

    带有文本和图标的 Android 警报对话框

  21. 21

    如何借助CSS在HTML中显示带有文本的图标?

  22. 22

    如何借助CSS在HTML中显示带有文本的图标?

  23. 23

    如何使用React Native CSS实现带有2个图标的破折号

  24. 24

    带有分组图标的input-group-addon / font-awesome文本框的边框混乱

  25. 25

    根据SQLite数据库数据创建带有文本和收藏夹图标的ListView

  26. 26

    如何在jQuery数据表上添加带有搜索图标的占位符文本

  27. 27

    Flutter如何创建右图带有两个图标的文本框,与图像中的一样?

  28. 28

    在带有 CSS 的文本之前显示 Bootstrap 图标显示代码而不是图标

  29. 29

    带有文本,图标,文本的ActionBar菜单

热门标签

归档