We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Increase font size globally

Your components all use a fairly small font size and I would like to increase them (along with icon sizes and padding) to match the standard 16pt used by angular material and bootstrap.

I've been hacking at the css for individual components, inspecting the elements one by one and fiddling with them but I'm sure there must be a better way?

2 Replies

DA David May 27, 2019 01:57 PM UTC

Just to add, I can see that we can change the colour values via scss variables but I see nothing about sizes etc.  Is that possible?

I also cannot find any mention of CSS classes in the documentation that might effect sizes eg ".btn-large" or something like that.  Is there any?

JA Jesus Arockia Sankaran S Syncfusion Team May 28, 2019 03:42 AM UTC

Hi David, 

Thanks for contacting Syncfusion support.  

We have checked your requirement and suggest that you use classes “.e-icons” and “.e-control” to increase the icon size and font size as shown in the code snippet below. But while increasing the font size of icons, it affects other component padding. 

Code Snippet

.e-icons { 
  font-family: "e-icons"; 
  font-style: normal; 
  font-variant: normal; 
  font-weight: normal; 
  font-size: 20px; 
  line-height: 1; 
  speak: none; 
  text-transform: none; 

If you need further assistance in this, please come back to us. 

Jesus Arockia Sankaran S 

Live Chat Icon For mobile
Up arrow icon