Changing Icon Font Typeface

Topic: Changing Icon Font Typeface

Nick Mullally (thakyZ) asked 8 years ago

I am a pro supporter for MDB. I would like to know if it is possible to use Google's Material Design Icons Font instead of Font Awesome's Icon Font. The link for anyone wanting to figure if it is possible for me is located here: https://github.com/google/material-design-icons

Add comment

Nick Mullally (thakyZ) answered 8 years ago

1 0 Best answer

No, I only need help with aligning it.

Add comment

Marta Szymanska staff pro premium answered 8 years ago

0 0 Best answer

Hi, You just need to paste this link: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> instead of this link in your MDB file: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

Add comment

Nick Mullally (thakyZ) answered 8 years ago

0 0 Best answer

Ya I did try that but the colors we not the same, and I did try making it look like the font awesome one but nothing changed, so I may have to mess with it some more...

Add comment

Marta Szymanska staff pro premium answered 8 years ago

0 0 Best answer

In the Material Icons Guide: http://google.github.io/material-design-icons/#icon-font-for-the-web, title: COLORING, they explain how to change the color and it works in any MDB file. I paste here my example code in MDB file:

<style>
        .material-icons.orange600 {
            color: #FB8C00;
        }
    </style>

</head>

<body>

    <div class="container">
        
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates doloribus assumenda similique ad unde facilis, magni libero quia a, dolore aut! Esse ipsum provident, eveniet accusantium laborum eligendi! Sunt, suscipit.<i class="material-icons orange600">android</i></p>
    </div>

Add comment

Nick Mullally (thakyZ) answered 8 years ago

0 0 Best answer

Well it is also because the font that you guys use is centered vertically and the Google icon font's lower sides are sitting on the bottom. With Font Awesome: