1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Changing Icon Font Typeface

Nick Mullally (thakyZ) free asked 7 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

Nick Mullally (thakyZ) free answered 7 years ago

No, I only need help with aligning it.

Marta Wierzbicka staff answered 7 years ago

I see the difference, but where you need help? With the color of text and icon or align icon and text?

Nick Mullally (thakyZ) free answered 7 years ago

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: With Font Awesome With Google Icon Font: With Google Icon Font

Marta Wierzbicka staff answered 7 years ago

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>

Nick Mullally (thakyZ) free answered 7 years ago

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...

Marta Wierzbicka staff answered 7 years ago

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">
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags
font font-awesome google icon material-design
About author
Nick Mullally (thakyZ)
12Support score
4Questions 3Answers 0Snippets