如何为个人维基的blockquote右侧边框添加Google Material Font Icons图标

1. 引入Google Material Icons字体 #

把下面的代码添加到你现有CSS文件的最顶部，完成图标字体的引入：

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

如果你的个人维基不支持在CSS里引入外部资源，也可以把对应字体引入代码放到维基全局HTML的<head>标签内。

2. 调整blockquote样式添加图标逻辑 #

在你现有blockquote的CSS规则基础上，追加下面的样式代码，你可以根据自己需要的图标类型、样式调整对应参数：

/* 给所有blockquote预留右侧图标位置，保留你原有其他blockquote样式 */
blockquote {
  position: relative;
  padding-right: 50px; /* 可根据图标大小自行调整数值 */
}

/* 通用图标样式，复用减少冗余代码 */
blockquote::after {
  font-family: "Material Icons";
  position: absolute;
  right: 12px; /* 图标距离右侧边框的距离，可自行调整 */
  top: 50%;
  transform: translateY(-50%); /* 实现图标垂直居中 */
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

/* 提示类blockquote配置，对应info图标 */
blockquote.info::after {
  content: "info";
  font-size: 24px; /* 图标大小 */
  color: #2385bb; /* 图标颜色，可匹配你的blockquote边框色 */
}

/* 警告类blockquote配置，对应warning图标 */
blockquote.warning::after {
  content: "warning";
  font-size: 24px;
  color: #f0ad4e;
}

/* 错误类blockquote配置，对应error图标 */
blockquote.error::after {
  content: "error";
  font-size: 24px;
  color: #d9534f;
}

3. 使用时指定blockquote类型 #

如果你用的个人维基工具支持给块级元素指定自定义类，在写内容时给对应blockquote加上你配置好的类名即可，示例写法：

> 这是一条普通提示内容
{: .info}

如果不需要区分多种blockquote类型，只需要统一加同一个图标，直接把content、font-size、color属性写到上面的blockquote::after选择器里即可，不需要额外加类名。

常见问题排查 #

• 如果图标显示为纯文字，说明字体引入失败，检查引入代码是否放在CSS最顶部，或者全局HTML头部配置是否生效
• 图标位置不对可以调整padding-right、right、top的数值，直到匹配你现有样式
• 可以自行替换content属性里的图标名，获取你需要的对应图标效果

内容的提问来源于stack exchange，提问作者Alex