logo标签列表

如何在MaterializeCSS中使用自己的Material Design图标？

cssmaterial-designmaterialize
6

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

我该如何添加并像默认图标一样使用它们

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

感谢您的提前帮助。
你可能需要自己制作。我认为他们使用SVG精灵，所以这可能是一个比你链接的更大的工作。 - Paulie_D
真烦人！我只想添加一些社交网络的Materialize图标，比如Facebook、LinkedIn和Twitter！可是在Google Material Design中并没有这些图标。 - Hassam Abdelillah
2个回答
8

好的，这个网站提供了一种替代方案。它包括很多图标，比如社交按钮等。

http://materialdesignicons.com/getting-started

您只需添加此CSS链接即可获得这些图标，并将其添加为类。

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

and 

<i class="mdi mdi-facebook-box"></i>  <!-- facebook box -->
在我的情况下，图标没有出现。我认为这与我的 materialize.css 存在冲突（当我检查 i 标签时，我看到了该引用）。 - JCarlosR
你说的是哪个参考文献，@JCarlos？ - Hassam Abdelillah
在开发者控制台（chrome）中，我看到i标签忽略了materialdesignicons文件（因为我有另一个带有图标的CSS）。但是，我找到了其他有用的链接：http://codepen.io/luciarrno/pen/RPVgaJ - JCarlosR
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

1
有没有一种本地引用图标文件的方法？ - Vishnu
1
是的，可以使用CSS中的:before和:after伪元素。您可以参考[http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice]上如何使用这些伪元素的方法。 - Karl Patrick Espiritu
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接