网页设计如何提升效率？Potlab Icons 代码直接引用技巧分享

.nav-icon {
  font-size: 32px;
  color: #333;
  transition: color 0.3s;
}
.nav-icon:hover {
  color: #4a90e2;
}

<span class="iconfont icon-home nav-icon">span>

.icon-mobile {
  font-size: 1.5rem; /* 相当于18px，随根字体大小变化 */
}

@media (max-width: 768px) {
  .icon-mobile {
    font-size: 1.2rem; /* 移动端变成14.4px */
  }
}

<span class="iconfont icon-notice" style="position: relative; color: #666;">span>
<span class="红点">span>

.reddot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  background: #ff4444;
  border-radius: 50%;
}

.icon-with-border {
  position: relative;
  padding: 8px;
}
.icon-with-border:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  border: 2px solid #eee;
  border-radius: 4px;
  z-index: -1;
}