Could you help me to create a css class for my button?

0
Hello, I’m absolutally not an css expert and I don’t know how to do what I want: I need a class to display a button like this: I know how to do it via the attributes of the button object, it is easy… But I need to have a class giving this result to use it in my treetable widget. for the moment, I have: .delete-button { @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover); } but I don’t know how to add the icon… Could you help me? Vincent
asked
4 answers
2

Hi Vincent,

Easiest way to find out is to inspect how Mendix does it: inspect a Mendix button with trash-icon yields:

So in your case, you want to add the following to your CSS:

.delete-button {
    @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover);
}

.delete-button:before {
font-family: "Glyphicons Halflings"; 
content: '\e020';
}

If you're working in SCSS and compiling, you can do it shorter:

.delete-button {
    @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover);
&:before {
font-family: "Glyphicons Halflings";
content: '\e020';
}
}

Hope this helps!

EDIT: Added the font-family, which on the Menix buttons is declared in the .glyphicon class, but is also necessary here.

answered
1

 

If you create a standard mendix button and add a glyphicon to it, e.g. ‘Search’  when you inspect it you will see that it has a class like this 

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

::before

if you inspect the css you will see

.glyphicon-search:before {

content: '\e003';

}

try adding the glyph classes to your button

 

answered
0

I tried the code of the previous comment adn I got this...

Any Idea to improve the result?

answered
0

So thanks to previous answers, I found the solution. The scss code is:

.delete-button {
    @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover);
	&:before {
		font-family: "Glyphicons Halflings";
		content: '\e020';
	}
}

 

answered