CSS中的ReactJS材质图标

我安装了以下物料图标包:

@material-ui/icons@4.9.1

我需要将CSS文件中某个类的“内容”值设置为向下箭头。我该怎么做?

iCMS 回答:CSS中的ReactJS材质图标

var speech = SpeechClient.Create(); var response = speech.Recognize(new RecognitionConfig() { Encoding = RecognitionConfig.Types.AudioEncoding.Linear16,SampleRateHertz = 16000,LanguageCode = "en",},RecognitionAudio.FromFile(DEMO_FILE)); 中的材料UI图标已作为React组件导出,因此您不能在CSS中使用它们。

但是您别无选择。

  1. 包括材料图标字体并使用它。更多信息herehere

检查codepen

一旦在页面中包含了字体,就可以像这样在CSS中使用

@material-ui/icons@4.9.1
  1. 但是我不喜欢仅导入一个图标就导入整个字体文件。所以这就是我以前要做的。

获取图标的svg。从材料ui图标页面检查图标,获取svg代码,并使用复制的html创建一个新的svg文件,并将其放置在您的项目中。

enter image description here

一旦有了svg文件,就可以在CSS中像这样使用它

p::after,div::after {
  content: "face";
  color: blue;
}

注意:如果您不想使用svg文件,则可以使用数据url方法,并将整个svg包含在CSS文件中。

本文链接:https://www.f2er.com/1803525.html

大家都在问