i have been trying to add icon from http://seehowsupport.com/font-awesome/ website to my p-button.
<div class="ui-g-12">
<button pButton id="selectFile" (click)="selectFile()" label="+ Select File..."></button>
</div>
here, in place of '+' in label, i wish to set icon from above url. I have heard changing some content attribute in css to \f067 can do it but m not sure how to.
Thanks
Icon on a button is specified with icon attribute and position is customized using iconPos attribute. Default icon position is left. To display only an icon, leave label as undefined.
Here are two ways by which you can add icons to primeng Button.
<button pButton type="button" icon="pi pi-check" iconPos="left"></button>
<p-button label="Click" icon="fa fa-check" iconPos="left"></p-button>
working Example
For more read on documentation -
https://primefaces.org/primeng/#/button
Use This way where it shows in their documentation and it works.
<div class="ui-g-12">
<button pButton id="selectFile" (click)="selectFile()" label="Select File..."><i class="fas fa-500px"></i>Text</button>
</div>
Link for How to use it https://fontawesome.com/how-to-use/svg-with-js
Related
I want to search the Angular component name for this widget which is three dots, and when we click it then something like a context-menu appears:
How is it called?
Search here for that icon https://material.io/resources/icons/?search=dot&style=baseline.
And here you have some examples of creating this type of menu https://material.angular.io/components/menu/examples
I guess this is what you're looking for, here is my code that works
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon button with a horizontal three dot icon">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Edit</button>
<button mat-menu-item>View</button>
<button mat-menu-item>Delete</button>
</mat-menu>
To change the three dot to be vertical, simple change this
more_horiz
to
more_vert
Below is my first attempt to build a Razor page w/ Boostrap. When the page is first brought up, the form is collapsed. When the user clicks on the Revisit a quote button, the form then expand. I followed the documentation on Bootstrap's site to the dot, but no idea getting the toggle to work. What am I missing?
#page "/"
<div>
<label>What would you like to do?</label>
<div>
<button class="btn btn-primary"
type="button">
Create a new quote
</button>
</div>
<div>
<button class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#quotesearchForm"
aria-expanded="false"
aria-controls="quotesearchForm">
Revisit a quote
</button>
<div class="collapse" id="quotesearchForm">
<form>
<input /><div class="dropdown" /><button></button>
</form>
</div>
</div>
</div>
Mystery solved...out of the box Blazor only has the bare-bones structure from Bootstrap and does not have the javascript portion. What Blazor wants you to do is to use its code to eliminate the use of javascript. Blazor does that by using its SignalR technology to transmit very small amount of data over the wire to do that. Tim Corey has a YouTube video on this.
I have a mat-icon button,however after adding [routerlink]="[/edit-job]" I am not able to view the button icon. Although I can see mat-tooltip and on clicking it redirects me to edit page but I am unable to viewe Icon.
Current Code for Mat-Button
<button
mat-icon-button
[routerLink]="['/edit-job']"
matTooltip="Edit Job"
></button>
However If I change my code to this I am able to view Icon properly
<button mat-icon-button (click)="editJob()" matTooltip="Edit Job">
<mat-icon>edit</mat-icon>
</button>
Can someone tell what am I doing wrong and how to fix it.
I am attaching a screenshot for better understanding.
As shown on the documentation you should add the import on app-module
https://material.angular.io/components/button/api
The import to add is :
import {MatButtonModule} from '#angular/material/button';
And thats an example of material button :
<button mat-icon-button>Click me!</button>
You have to include <mat-icon>edit</mat-icon> inside the <button> tag for the first case too.
as #Sumit Vekariya said add <mat-icon>edit</mat-icon> to your button
Ex:
<button mat-icon-button [routerLink]="['/edit-job']" matTooltip="Edit Job">
<mat-icon>edit</mat-icon>
</button>
I'm using ejs templates for my webpage, and I'm having layout troubles.
I have a button inside a <div> that's set to display:none as a dropdown, and should show up when the container is hovered over. Instead, the buttons that should be in the dropdown are rendered outside of it and have seemingly no relation to it.
Source ejs file:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
<button>TestButton</button>
</div>
</button>
And the resulting page according to chrome's element viewer:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
</div>
</button>
<button>TestButton</button>
The <p> tag still displays correctly
I don't believe you can put a button element within a button element.
Try it out on MDN here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
This is the example input I put into their live editor. When you inspect the button, you'll get the same output as you've shared in your post.
<button class="favorite styled"
type="button">
<button>Hello</button>
Add to favorites
</button>
Depending on where you need the button, you could try styling the outside or inside element to look like a button as a work around!
What is the proper way to create a button? The first way does not work...
<div class="buttonContainer">
<button type="submit" onclick="moSucess()" >Sign In</button>
</div>
<a id="sincData" href="#sincPage" data-role="button" onclick="moSucess()">Submeter</a>
If you are trying to create a styled JQM button using an a tag, check out the documentation here for this jsfiddle example.
Link button