[分享]css发布消息后面有个小图标

在现代网页设计中，CSS扮演着重要的角色，不仅可以让网页看起来更加美观，还可以增加网页的交互性。其中，CSS中的小图标也成为了设计中一个常用的元素，本文将介绍如何在CSS中添加发布消息后面的小图标。 ...

在现代网页设计中，CSS扮演着重要的角色，不仅可以让网页看起来更加美观，还可以增加网页的交互性。其中，CSS中的小图标也成为了设计中一个常用的元素，本文将介绍如何在CSS中添加发布消息后面的小图标。

<link rel="stylesheet" href="http://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css"> 

首先，在CSS文件中添加以上代码，引入Font Awesome图标字体库。该库中包含了很多常用的图标，而且只需要一行代码就可以实现图标的添加。

.post:before {
  content: "f1e5";
  font-family: FontAwesome;
  padding-right: 5px;
  color: #ccc;
} 

上述代码中，我们使用了:before伪类来实现在发布消息前添加图标的效果。其中，content属性指定了要使用的图标，反斜杠加上图标代码可以在页面上展现出字体库中的图标，在此处我们使用了“fa-pencil”图标，它的代码是“f1e5”；font-family属性则指定了使用的字体库，即FontAwesome；padding-right属性用于控制图标与发布消息之间的间距；color属性用于控制图标的颜色，可以设置和发布消息相同的颜色或者使用其他颜色进行突出。

将以上代码添加到对应的CSS文件中，即可实现在发布消息后添加小图标的效果。