Currently, I am working on developing a button widget using react. I have utilized the 'Open Sans' font family for the HTML body in order to maintain consistent UI styling. However, some of the styling elements break down when the 'Open Sans' font is not used. To address this issue, setting the font-family to 'Open Sans' resolves the problem. My goal is to create CSS styling that remains consistent regardless of the font-family being used.
To observe the UI changes that occur, please visit the following link: https://i.sstatic.net/usbp7.jpg. I have created a gif demonstrating these changes.
Below is the JSX code for the widget component:
<div id="context-draggable" className={b()}>
<button
onClick={() => getContextItems('center-btn',contextItems)}
className={b('center-btn').toString()}>
15
</button>
<FontIcon
onClick={() => getContextItems('top-left-btn',contextItems)}
className={b('top-left-btn').toString()}
name='top-left'
size={32}
/>
<FontIcon
onClick={() => getContextItems('top-right-btn',contextItems)}
name='top-right'
size={32}
className={b('top-right-btn').toString()}
/>
<FontIcon
onClick={() => getContextItems('bottom-left-btn',contextItems)}
className={b('bottom-left-btn').toString()}
name='bottom-left'
size={32}
/>
<FontIcon
onClick={() => getContextItems('bottom-right-btn',contextItems)}
name='bottom-right'
size={32}
className={b('bottom-right-btn').toString()}
/>
<FontIcon
className={b('bg-transparent').toString()}
name='bg-transparent'
size={32}
/>
</div>
Additionally, here is the SCSS code for the widget component:
.context-widget {
// Styling rules for the widget component...
}
The above code snippets showcase the implementation of the widget component.
Moreover, I have included shared CSS styles below:
@font-face {
// Font-face declaration for 'Open Sans' font
}
// Common CSS for body and app styling...
In conclusion, my main objective is to ensure that the icons within the widget do not change their size regardless of the font-family specified in the body tags.