• 注册
  • 发布
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:64 内容:10

    利用伪元素:before和:after修改图标及文字

  • 查看作者
  • 打赏作者
  • 当前位置: 飞优网 > Wordpress > wordpress主题 > 正文
    • 18
    • wordpress主题
    • 全栈营销师
      3
      推荐官

      今天教大家修改图标,主要是利用伪元素来做,以飞优网为例来改造:

      先看下效果:

      利用伪元素:before和:after修改图标及文字

      具体改造方案:

      先看看默认的情况:定位目标F12修改位置,原来的就只是这个红色部分的文字,

      利用伪元素:before和:after修改图标及文字

      DEMO上出现了“来自和一个圈子图标”,那今天就是要利用伪元素实现,因为定位已经找到了这个钩子: jinsom fenlei1,因此在这个前添加:before即可,代码如下:

      .jinsom-fabiao1:before {
          content: '\e878';
          font-family: 'iconfont' !important;/*调用iconfont*/
          font-size: 20px;
          font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      上面有一个调用iconfont文字,那么我们需要添加这个圈子体表的代码,可以直接切回iconfont,找到这个代码,如图:

      利用伪元素:before和:after修改图标及文字

      把\e878,添加到

      //(改成英文下单引号)
      content:"内容"
      content:'\e878'

      至此大功告成,接下来前端就会看见demo上的显示了。

      更多问题请留言本帖!

      隐藏内容需要回复可以看见

      回复
      MarTech·小生
      比心
      回复
      MarTech·小生
      爱心

      一颗红心两只手,世世代代跟党走。

      回复
      MarTech·新手
      感谢

      不是他,变成他。

      回复
      MarTech·小生
      比心
      回复
      MarTech·小生
      感谢
      回复
      MarTech·新手
      比心
      回复
      MarTech·小生
      爱心
      回复
      MarTech·小生
      感谢
      回复
      MarTech·新手
      爱心
      回复
      MarTech·新手
      比心
      回复

      请登录之后再进行评论

      登录
      聊天
      关注 75

      推荐圈子

      暂没有数据

    • 赚金币
    • 发布
    • 飞优网小程序码 小程序扫码
    • 签到中心
      小黑屋
      举报中心
    • 帖子间隔 侧栏位置: