在没有图像的html元素上显示`.move {cursor：move;}`图标

Question

我需要在我的HTML中的.move {cursor: move;}元素上应用<i>。它有可能吗？

Answer 1

以下是使用CSS创建此内容的一种奇特方式：

.move {
  height: 100px;
  width: 100px;
  background: #000;
  position: relative;
  display:inline-block;
  margin: 50px;
  transform: rotate(45deg);
}

.move:after {
  content: "";
  position: absolute;
  z-index: 1;
  height: calc(100% - (8% * 2));
  width: calc(100% - (8% * 2));
  top: 8%;
  left: 8%;
  background: linear-gradient(to right, #000 33.33%, #fff 33.33%, #fff 66.66%, #000 66.66%) 0 50%/100% 33.33% no-repeat, 
  linear-gradient(to right, #fff 33.33%, #000 33.33%, #000 66.66%, #fff 66.66%);
  transform: rotate(-45deg);
}

<i class="move"></i>

Answer 2

据我所知，没有Unicode，所以你必须使用一个图标。例如，我添加了base64图像，但这可以是任何格式

＆＃13;

＆＃13;

.move {
  display:inline-block;
  width:20px;
  height:20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnIGlkPSJtb3ZlIj48Zz48cG9seWdvbiBzdHlsZT0iZmlsbDojMDMwMTA0OyIgcG9pbnRzPSIxOCwyMCAxOCwyNiAyMiwyNiAxNiwzMiAxMCwyNiAxNCwyNiAxNCwyMCAiLz48cG9seWdvbiBzdHlsZT0iZmlsbDojMDMwMTA0OyIgcG9pbnRzPSIxNCwxMiAxNCw2IDEwLDYgMTYsMCAyMiw2IDE4LDYgMTgsMTIgIi8+PHBvbHlnb24gc3R5bGU9ImZpbGw6IzAzMDEwNDsiIHBvaW50cz0iMTIsMTggNiwxOCA2LDIyIDAsMTYgNiwxMCA2LDE0IDEyLDE0ICIvPjxwb2x5Z29uIHN0eWxlPSJmaWxsOiMwMzAxMDQ7IiBwb2ludHM9IjIwLDE0IDI2LDE0IDI2LDEwIDMyLDE2IDI2LDIyIDI2LDE4IDIwLDE4ICIvPjwvZz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);


}

＆＃13;

<i class='move'></i>

＆＃13;

＆＃13;

＆＃13;