Changing Icon Font Typeface


Topic: Changing Icon Font Typeface
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
No, I only need help with aligning it.

Marta Szymanska staff pro premium answered 5 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">
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 Szymanska staff pro premium answered 5 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>

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 Szymanska staff pro premium answered 5 years ago

I see the difference, but where you need help? With the color of text and icon or align icon and text?
Please insert min. 20 characters.
Status

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes