我应如何在下列CSS content属性中插入Google Material图标“向右箭头” (https://design.google.com/icons/#ic_chevron_right)?
.bullet li a:before {
content: "";
}
我应如何在下列CSS content属性中插入Google Material图标“向右箭头” (https://design.google.com/icons/#ic_chevron_right)?
.bullet li a:before {
content: "";
}
2018年的更新
谷歌已移除了早期在IE9及以下版本中显示的代码。要获取代码,请访问GitHub存储库中的codepoints文件。
codepoints在GitHub存储库的链接:https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints
步骤1:包括Material Icons样式表。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
步骤2:
CSS代码:
.bullet li a:before {
font-family: "Material Icons";
content: "\e5cc";
}
解释: 值e5cc
是你在chevron中看到的代码。
font-feature-settings
的现代浏览器,您可以直接使用图标的名称而不是代码点:.bullet li a:before { font-family: "Material Icons"; content: "chevron_right" }
。 - Joe::before {
font-family: 'Material Icons';
content: "\E87C";
}
::after {
font-family: 'Material Icons';
content: "face";
}
content
属性中可以直接通过名称引用图标 - 不错的技巧! - Pavel Ye2022 年更新
使用新的材料设计符号轮廓化。
.selector::before {
font-family: "Material Symbols Outlined";
content: "\e5cc";
}
试试这个。
.bullet li a:before {
font-family: FontAwesome;
content: "\f054";
}
您可以在此处查看内容值
该链接提供了有关内容值的信息。::after {
font-family: 'Material Design Icons';
content: "\f054";
}
还有一个方便的速查表可用。
2021年6月更新
Material Icons的编码点位于Google Fonts网页的Material Icons部分。
步骤1:包含Material Icons样式表。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
::after {
font-family: 'Material Icons';
content: "/e5cc";
}
说明: 值e5cc
是您在下一个链接和图像中看到的尖角标记的代码。
https://fonts.google.com/icons?selected=Material+Icons&icon.query=chevron
.bullet li a:before {content: '\E5CB';}
e5d8
,您可以在CSS中引用它,如content: "\e5d8";
。https://fonts.google.com/icons?icon.query=arrow - Jesse Nickles