@font-face {
  font-family: 'RemixIcon';
  src: url('../font/remixicon.woff2') format('woff2');
}

.icon {
  font-family: 'RemixIcon';
  font-size: 24px;
  line-height: 1;
  display: inline-block;
}

/* 图标基础样式 */
.icon {
  width: 20px;
  height: 20px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  flex-shrink: 0;
}

/* 导航图标 */
.icon.nav-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z'/%3E%3C/svg%3E");
}

/* 链接图标 */
.icon.link-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
}

/* APP图标 */
.icon.app-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

/* 安卓图标 */
.icon.android-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-2.86-1.21-6.08-1.21-8.94 0L5.65 5.67c-.19-.29-.58-.38-.87-.2-.28.18-.37.54-.22.83L6.4 9.48C3.3 11.25 1.28 14.44 1 18h22c-.28-3.56-2.3-6.75-5.4-8.52zM7 15.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z'/%3E%3C/svg%3E");
}

/* iOS图标 */
.icon.ios-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.05 20.28c-.98 1.42-2.01 1.39-3.07 1.39-1.06 0-1.36-.49-2.59-.49s-1.67.49-2.73.49c-1.06 0-2.17-.49-3.15-1.91C4.27 18.11 3 15.84 3 13.57 3 9.5 5.49 7.39 7.99 7.39c1.13 0 2.07.49 2.78.49.71 0 1.81-.49 3.07-.49 1.26 0 2.09.49 2.78.49 1.13 0 2.07-1.47 3.77-1.47.67 0 2.06.24 3.07 1.91-2.75 1.67-2.31 6.03.54 7.22-.42 1.21-.84 2.41-1.47 3.38-1.05 1.6-2.01 1.47-3.07 1.47-1.06 0-1.36-.49-2.59-.49s-1.67.49-2.73.49z'/%3E%3C/svg%3E");
}

/* 教程图标 */
.icon.tutorial-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z'/%3E%3C/svg%3E");
}

/* QQ图标 */
.icon.qq-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12.003 2c-5.518 0-9.997 4.48-9.997 9.998 0 5.517 4.479 9.997 9.997 9.997s9.997-4.48 9.997-9.997c0-5.518-4.479-9.998-9.997-9.998zm4.843 16.412c-.223 0-.442-.015-.66-.045-1.115-.153-2.185-.61-3.09-1.324-.363.027-.728.042-1.093.042-1.347 0-2.677-.2-3.947-.595-.26-.08-.462-.27-.537-.524-.075-.254-.025-.53.133-.743.222-.3.456-.59.7-.87-1.177-1.296-1.893-2.97-1.893-4.807 0-3.964 3.226-7.19 7.19-7.19s7.19 3.226 7.19 7.19c0 1.865-.73 3.562-1.936 4.867.256.29.5.59.732.897.16.213.21.49.134.743-.075.254-.277.444-.537.524-.58.18-1.18.27-1.78.27z'/%3E%3C/svg%3E");
}

/* 社区图标 */
.icon.community-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}