如何更改我网站的“谷歌图标”的颜色

Question

我有一个问题。 请问有人可以帮我吗？我正在创建 Flipkart.com（一个电子商务网站）的克隆。 我需要一些与他们网站上颜色相同的图标。我在谷歌字体上找到了一些，但只有两种颜色变化（黑色和白色）。 我需要相同的黄色图标，任何人都可以帮我解决这个问题。

Google 字体链接--- https://fonts.google.com/icons?icon.query=suitcase

<span class="material-icons-outlined">

工作大纲 工作大纲 br 代码点 e943

Answer 1

使用

css

应用样式。这个有用吗？

html, body {height: 100%}
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  fill: yellow;
  width: 100px;
  height: auto;
}

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14 6V4h-4v2h4zM4 8v11h16V8H4zm16-2c1.11 0 2 .89 2 2v11c0 1.11-.89 2-2 2H4c-1.11 0-2-.89-2-2l.01-11c0-1.11.88-2 1.99-2h4V4c0-1.11.89-2 2-2h4c1.11 0 2 .89 2 2v2h4z"/></svg>

Answer 2

将其下载为 .svg 文件并将其放入您的代码中。使用

fill: red;

使其成为您想要的颜色。

<img src="image.svg" alt="image" fill="red">

这应该有效:)

Answer 3

1. 从 Material Icons 页面下载 .SVG 图标
2. 在文本编辑器中打开下载的 .svg 图像
3. 向右滚动一点并找到

   fill="#000000"

   （或

   fill="#FFFFFF"

   白色图标）
4. 将该十六进制颜色更改为您想要的颜色（查看colorpicker.me）
   • 例如

     fill="#FFFF00"

     代表黄色
5. 保存图像，然后使用

   <img src="icon.svg">

将图像嵌入到您的网站