Change button's content font when it contains font-awesome icon
Kristijan Iliev
I have a Kendo grid with action buttons inside which contains font-awesome icons inside them. What I want to do is to change the font of the button's text. But when you change the font, it overrides the font-awesome and the icons are not displayed (only empty squares are shown instead, which is the expected behavior).
The generated html is:
<a class="k-button k-button-icontext action-btn fa fa-pencil-square-o k-grid-Edit" href="#" style="font-family: 'Montserrat', sans-serif;">
<span class=" "></span>Edit
</a>
I am gonna share an image of how it looks inside chrome tools: 
My question is how to I override only the button's content font, not the ::before which is the actual font-awesome element.
Here's a fiddle to try it.
Kristijan Iliev
The problem was that this html element was generated by Kendo UI I am using, not by me. So I had to override the css rules, instead of changing the DOM structure.
I resolved the problem easily using these css rules:
.k-button.fa::before{
font-family: 'FontAwesome';
}
.k-button{
font-family: 'Montserrat', sans-serif;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How can I trace out modification of stored procedure with TSQL Command in SQL Server?
- Next: C# Check if a UILabel is not null not work
Related
Related Related
- 1
Change color when hover a font awesome icon?
- 2
change font-awesome icon when toggled
- 3
change font-awesome icon when toggled
- 4
Bootbox and Font awesome icon in button
- 5
Dynamically change Font Awesome Icon on Radio Button Change Event
- 6
How to change button text to font awesome icon using jquery
- 7
How to change button text to font awesome icon using jquery
- 8
How to change font-awesome icon color when it is active
- 9
How to change font-awesome icon color when it is active
- 10
Can I change the color of Font Awesome's icon color?
- 11
change the color of font awesome's exclamation triangle icon
- 12
Change the font path when using Font Awesome
- 13
Change the font path when using Font Awesome
- 14
Use Font Awesome icon as CSS content
- 15
When appending a font awesome icon in a button using jQuery the icon disappears when I click another button
- 16
CSS Awesome Font icon as submit button
- 17
Font Awesome version 4 - Button with spin icon
- 18
Font awesome icon and text in input submit button?
- 19
How to add Font Awesome icon into <input> button?
- 20
Font awesome icon button with label below
- 21
How to change font awesome icon hover color?
- 22
Change font awesome icon on click menu bars
- 23
Font Awesome Icon Alignment
- 24
Font Awesome icon in React
- 25
Font Awesome Icon Alignment
- 26
Change Font Awesome Icon on Click, but return to original icon when next item is clicked
- 27
Change color of Font Awesome icons when they selected
- 28
Font Awesome icon alignment inside md-button
- 29
how can I align font awesome icon in bootstrap button?
Comments