WordPress知更鸟Begin主题利用CSS为标题添加小图标

2018年11月7日13:52:16 发表评论 28

在文章标题前后加个醒目的图标,可以突出显示某篇文章。

将代码添加到WordPress知更鸟Begin主题选项→定制风格“自定义样式”中:

  1. /** 标题前图标 **/
  2. #post-46 h2 a:before {
  3.     content"\e68b";
  4.     font-family: be;
  5.     font-size16px;
  6.     color#c40000;
  7.     padding: 0 5px 0 0;
  8. }
  9. /** 标题后图标 **/
  10. #post-46 h2 a:after {
  11.     content"\e667";
  12.     font-family: be;
  13.     font-size14px;
  14.     color#c40000;
  15.     padding: 0 0 0 5px;
  16. }

其中:

  • #post-46 h2是文章列表标题选择器,修改其中的数字46,为文章ID,可以通过在后台查看文章ID或者通过查看源代码查看文章的ID。
  • content: "\e667"对应的阿里图标字体Unicode代码
  • font-family: be 使用自己的阿里图标库,将be改为zm

另外,可以直接上述代码直接添加文字

  1. /** 标题后加文字 **/
  2. #post-46 h2 a:after {
  3.     content"推荐";
  4.     font-size14px;
  5.     background#c40000;
  6.     color#fff;
  7.     margin: 0 0 0 5px;
  8.     padding1px 3px;
  9.     border-radius: 2px;
  10. }

效果如图:
WordPress知更鸟Begin主题利用CSS为标题添加小图标

举一反三,修改其中的#post-46 h2选择器,可以给任意页面元素添加图标。

weinxin
我的微信
分享和发布网站源码、免费软件下载和网站搭建技术教程,致力创造一个高质量网络资源教程的分享平台。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: