I'm having some html problems, was looking everywhere but couldn't find the right answer.
I need an add to cart button with font awesome icon in front.
The orig html is:
<i class="fa fa-shopping-cart"></i>[ADD_TO_CART]
I need to convert it into this code:
<input type="submit" name="add_to_cart" class="mod_bakery_bt_add_f" value="[ADD_TO_CART]" />
Related
In my HTML page I need to include a button element with a description and an icon (I use an icon from the fontawesome.com library).
To compile the data in my page I use the Knockout Javascript framework.
Compilation of the descriptive text of the button is done by text binding as in the example:
<button class="btn btn-sm btn-outline-secondary" data-bind="text:GetTranslatedText('SomeText')">
<i class="fas fa-trash-alt"></i>
</button>
The GetTranslatedText("SomeText") function returns the text translated into the language used by the user.
My problem is that when the framework compiles the text of the button, it overwrites the <i> element with which the icon is displayed.
Is there a simple way to concatenate both the text and HTML element of the icon into the binding?
Thanks!
Rather than binding the text to the button, which as you've seen overrides the buttons contents, bind it to a span alongside the icon:
<button class="btn btn-sm btn-outline-secondary">
<i class="fas fa-trash-alt"></i> <span data-bind="text:GetTranslatedText('SomeText')"></span>
</button>
How could I put an image inside my HTMl part of the code
<input id="sendButton" type="button" value=<img src="sendbutton.jpg"> />
I thought this would work but when I run the website it just shows as text "img src />"
Is there any way I could do this?
What this is about is a send button for a chat application, initially I had
<input id="sendButton" type="button" value="Send" />
Which worked perfectly and showed the button as "Send", but I would love to use an image in there like twitter, instagram etc... does.
What you have is simplly broken/invalid HTML. If you want a button which contains an image, but the image inside of a button:
<button id="sendButton">
<img src="sendbutton.jpg">
</button>
If (less likely, but anything is possible) you want the value of an input to be an HTML string, it needs to be HTML-encoded:
<input id="sendButton" type="button" value="<img src="sendbutton.jpg">" />
You can try this basic syntax and then customize it
<button type="submit" id="sendButton"><img src="sendbutton.jpg"></button>
I'm trying to use the following Font Awesome icon
<i class="far fa-angle-right"></i>
but the icon won't show up.
I tried two different embed codes to insert in my <head> section: the first was
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
and the second one was
<script src="https://use.fontawesome.com/0fa476ae4d.js"></script>
Both of them didn't work, and only a null sign appeared instead of my icon. The second embed code also completely broke and messed up my page's structure, pushing my form down.
That's the part where I'm trying to use the icon:
<form id="email-form">
<input
type="email"
name="email-input"
id="email-input"
placeholder="Email Address"
/>
<button type="submit" name="submit-button" id="submit-button">
<i class="far fa-angle-right"></i>
</button>
</form>
If you are going to use fontawesome in your entire project, you can install it globally or define it as "cdn" under index.html page. There may be a more logical solution.
First of all i used link i sen t you above and obtain my own kit. Then i try to use your icon and it works.
and taht icon should be
<i class="fas fa-angle-right"></i>
and not
<i class="far fa-angle-right"></i>
If you look up the angle-right Icon in their directory, you'll see that it requires a Pro-licence. If you don't have one, you have to use the s-style. The "null-icon" you mentioned is the usual flag to indicate missing/invalid icon.
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
I want an icon to go into an input submit button. I've tried the following, but it doesn't work. Any advice?
<input type="submit" name="submit" value="Submit" />
I wanna put the following in:
<i class="material-icons">star_rate</i>
There are various ways this can be done but according to your code just use
<button type="submit" name="submit"><i class="material-icons">star_rate</i></button>