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

在网页设计中，经常需要设计出发布消息的样式，为了更好的引起用户的注意，我们可以在发布消息后面加上一个小图标。这个小图标可以是一个感叹号、一个问号、一个喜欢的图标等等。/ CSS代码实现小图标 / .i...

在网页设计中，经常需要设计出发布消息的样式，为了更好的引起用户的注意，我们可以在发布消息后面加上一个小图标。这个小图标可以是一个感叹号、一个问号、一个喜欢的图标等等。

/* CSS代码实现小图标 */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  background-image: url("icon.png");
  background-size: cover;
} 

我们可以使用CSS的背景图片实现这个小图标，代码使用pre标签包裹，如上所示。其中，display: inline-block 使元素可以和文本一起排列，width和height设置图标的大小，margin-left设置图标和文字之间的距离，background-image指定背景图片，background-size设置图片的大小（cover为自适应铺满容器）。

除了背景图片，我们还可以使用字体图标的方式来实现小图标。字体图标使用CSS中的 @font-face 引入自定义图标字体，然后可以使用unicode码表示不同的图标，从而实现图标展示，这种方式相比背景图片的方式更加灵活。

无论是使用背景图片还是字体图标，都可以为用户带来更好的视觉体验，同时也提高了网页的美观程度。