【问题标题】:how to use own material design icons with materializecss?如何在materializecss中使用自己的材料设计图标?
【发布时间】:2015-08-25 17:48:54
【问题描述】:

我需要知道如何在自定义类中添加自己的 mdi 图标。提供的 mdi 类不符合我的期望。

如何添加这些并像默认一样使用它们

<i class="mdi-image-facebook"></i>
<i class="mdi-image-linkedin"></i>

提前致谢

【问题讨论】:

  • 您可能必须自己制作。我认为他们使用 SVG Sprites,因此您要链接的工作可能更大。
  • 那烦人的!我只想添加社交网络的具体化图标,例如 facebook、linked in、twitter !在谷歌材料设计中不作为 mdi 存在

标签: css material-design materialize


【解决方案1】:

嗯,这是本网站提供的替代解决方案。它包含大量图标,例如社交按钮。

http://materialdesignicons.com/getting-started

您只需添加此 css 链接即可获取图标并将它们添加为类

<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />

<i class="mdi mdi-facebook-box"></i>  <!-- facebook box -->

【讨论】:

  • 在我的情况下,图标没有出现。我认为我的materialize.css 存在冲突(当我检查i 标签时,我看到了那个参考)。
  • 你提到了@JCarlos 的哪个参考文献?
  • 在开发者控制台 (chrome) 中,我看到 i 标记忽略了 materialdesignicons 文件(因为我还有另一个带有图标的 css)。但是,我发现了其他有用的链接:codepen.io/luciarrno/pen/RPVgaJ
【解决方案2】:

只需包含此样式表:

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

您现在可以使用 materializecss 的图标标签。下面的示例:)

<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>

欲了解更多信息,请访问:http://materializecss.com/icons.html

【讨论】:

猜你喜欢
  • 2016-06-11
  • 1970-01-01
  • 1970-01-01
  • 2015-08-13
  • 1970-01-01
  • 1970-01-01
  • 2019-11-25
  • 2016-07-18
  • 1970-01-01
相关资源
最近更新 更多