I'm using the framework bootstrap 4 and I was wondering why is my button not re directing the user to another page?
<button type="button" a href="https://www.google.com" class="btn btn-outline-primary">Contact Us <i class="fas fa-envelope"></i></button>
Buttons are not links (and don't have a boolean a attribute).
If you want a link, use a link:
Contact Us <i class="fas fa-envelope"></i>
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>
so I'm currently trying to disable a button but also have the same button type. If anyone can help me with examples it would be great! Thanks so much to the ones that help! :D
<!--- I want this one to be the working button. --->
<a
class="project-link"
target="_blank"
href="/gimkit"
>Use <i class="fas fa-check-circle"></i> </a
>
<!--- this one to be the button that doesn't work. (disabled)
--->
<a
class="project-link"
target="_blank"
href="/support"
>Help <i class="fas fa-question-circle"></i> </a
>
I want something like this, but have the Help Button with a question mark to be faded instead of the normal button.
https://i.stack.imgur.com/QXRMz.png
For <button> element, just add the disabled property:
<button type="button" disabled>Help</button>
I think the button-elements answer is the best solution.
But if you really want to stick with the Anchor-Tags, you could also try to add a helper css class. For example you can use something like this:
<a
class="project-link disabled"
target="_blank"
href="/support"
onclick="return false;"
>Help <i class="fas fa-question-circle"></i> </a
>
And the css of the .disabled class could look like this:
.project-link.disabled{
opacity:0.5;
}
support me for set link on the button that works in both responsive mode.
<button type="submit" class="btn btn-primary btn-learn">Get now <i class="icon-arrow-right3"></i></button>
I tried this also..
<p><a class="btn btn-primary btn-learn">send Request <i class="icon-arrow-right3"></i></a></p>
in this original code where i should include link
If you are asking how to add a link, in the second piece of code add an href parameter, like so:
<p>send Request <i class="icon-arrow-right3"></i></p>
I am new to programming and just trying to get a simple button to link to google. However it seems every time I press it, it disappears. Any help would be great.
Below I have put my simple button using Boostrap, I just used the button and added an href to link to google with an i class of fa-edit,
<a href="https://www.google.se" class="btn btn-danger">
<i class="fa fa-edit fa-fw"></i>
google
</a>
Fiddle link
I'm sure it's a silly mistake, but any help would be great.
If you add the target attribute it will know to open in a new window I think that is why you are not having any luck making it work in your fiddle.
<a class="btn btn-danger" href="https://www.google.se/"
target="_blank"> <i class="fa fa-edit fa-fw"></i> google</a>
I have been using this kind of button in bootstrap 3. Normally is the Action to update or modify a row in a table.
I would like to use bootstrap 4, but this button is not rendering correctly.
I know this have changed, but how can I fix this?
This is the code for the button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
Instead of glyphicons Bootstrap 4 recommends using font-awesome. You can read more about migrations here. While the migration documentation states that btn-default is now btn-secondary, to have your button rendered similarly to what you have now you want to use btn-light.
Here's what your updated code would look like with it.
<button type="button" class="btn btn-light">
<i class="fa fa-pencil fa-2x" aria-hidden="true"></i>
</button>
Here's the code in a working codeply project.
From the migration page:
https://v4-alpha.getbootstrap.com/migration/
Renamed .btn-default to .btn-secondary
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Octicons
Font Awesome