I recently upgraded my font-awesome and ng-bootstrap, after which the tooltip has stopped working. Here's the code-
<i class="fa fa-info-circle px-1" aria-hidden="true" [ngbTooltip]="'Tooltip which shows on top'"></i>
The same code was working earlier before the update. Can anyone help me with this issue?
Update:
I enclosed the <i> tag with a span tag and put the ngbTooltip directive in span tag only. It works with this "hack"!
This should not be that hard have you tried the way Angular Bootstrap shows?
<button type="button" class="btn btn-outline-secondary me-2" placement="top" ngbTooltip="Tooltip on top">
<i class="fa fa-info-circle px-1" aria-hidden="true"></i>
Looks like you missing placement?
Related
I am using bootstrap and CSS to style my website but I can't seem to figure out how to change the font style and weight of the text within my buttons. Here is some of my code
<button type="button-apple" class="btn btn-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
I would like to change the font to be bolder so the words are easier to read because on my screen they come out as very thin lines.
Thanks in advance.
Whenever you try to work into libraries, please keep in mind that, you are overriding the style they already defined. In that case, just defining new styles such as color, font-weight etc. will not work. And also, please don't try to modify the class names they are already using.
You Can solve it in several ways
First Method is to add a new class from your own example: here -> .my-button-class and try to do
the styling. Then use !important with that, it will override the
style you want.
For Example
Your HTML will be as follow:
<button type="button-apple" class="btn btn-light btn-lg download-button my-button-class">
<i class="fab fa-google-play"></i> Download
</button>
CSS for the first method
.my-button-class{
font-weight: bolder !important;
font-size: 2rem !important;
color: blue !important;
};
Second Method using specificity which is calling a class inside of a tag for example: button.my-button-class to style it instead of using !important, that's also a very good solution.
CSS for the second method
button.my-button-class{
font-weight: bolder;
font-size: 2rem;
color: blue;
};
Hope it will solve your problem. :)
Thanks
You can wrap your button text in an anchor and then use a span item:
<a href="#" class="btn btn-light btn-lg download-button">
<i class="fab fa-google-play"></i>
<span style="font-weight:bolder;">Download</span>
</a>
I wish to add a font awesome icon beside my input button.
So, I found this answer and only option 1 apply to my use case since I need to submit a form to delete repository.
But the input button does not match the color of span tag.
I tried to add btn-danger class into input tag but it has shadow.
https://jsfiddle.net/coolwei/4osuyrk5/6/
What I want to achieve is a consistent color and button size with View and Add button.
First of all, you should use <button> tag.
However, if you really have to do this that way, you should clear default input styles like this:
.clear-input {
background: none;
color: inherit;
padding: 0;
border: 0;
}
And add this class to your input
<input class="clear-input" type="submit" value="Delete">
https://jsfiddle.net/2vdabphn/
I'm not sure why you're nesting a button inside an a here.
<a href="#">
<button type="button" class="btn btn-success mr-1">
<i class="fas fa-user-plus"></i>
Add Student
</button>
</a>
For your submit button, what you want to do is use the button tag with the type="submit" property.
<button type="submit" class="btn btn-danger">
<i class="far fa-trash-alt"></i>
Delete
</button>
My font awesome icons aren't linking to where I set the href on the a tag. In fact when I inspect them there is no href on the a tag. I have some demo code for you to look at, but on the demo code it does show the href when inspecting it just doesn't link to the page. Maybe if this code is fixed it will fix my issue. Thanks
<a href="https://www.google.co.uk/">
<i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
</a>
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
https://jsfiddle.net/znvfbu9g/
Provide a target attribute to your a tag.
Something on the lines of:
<a target="_blank" href="https://www.google.co.uk/">
<i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
</a>
Check updated fiddle.
Do you have the latest CDN attached to you page to display the icons?
http://fontawesome.io/get-started/
I have four span elements that serve as Font Awesome (icon font service) stacks meaning that they each contain two font-awesome "i" elements.
<span class="fa-stack fa-2x left-arrow-button portfolio-arrow-button">
<i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-2x right-arrow-button portfolio-arrow-button">
<i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-2x left-arrow-button-2 portfolio-arrow-button">
<i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-left fa-stack-2x left-arrow-img" aria-hidden="true"></i>
</span>
<span class="fa-stack fa-2x right-arrow-button-2 portfolio-arrow-button">
<i class="fa fa-circle fa-stack-1x fa-lg button-circle-background" aria-hidden="true"></i>
<i class="fa fa-chevron-circle-right fa-stack-2x right-arrow-img" aria-hidden="true"></i>
</span>
I created a CSS media query at a min-width of 1290px, and wanted to hide these span elements (and their children of course) starting at this query size.
So, I added (at this query size) the class "portfolio-arrow-button" to all of these span elements and gave them a declaration of display: none;
This didn't work.
Knowing that when it comes to making style overrides to Font Awesome icons it sometimes requires using the :before pseudo selector, I tried:
".portfolio-arrow-button:before", but to no avail.
What eventually worked to hide the buttons was: targeting each "i" element, within their parent span element, and using the :before pseudo selector, then using the "display: none;" declaration.
.button-circle-background:before, .left-arrow-img:before, .right-arrow-img:before {
display: none;
}
Although I'm glad that this hid the "buttons" themselves, I would really like for the span elements to be gone from the page entirely also.
No they are not visible, but when inspected with the debugger, they are still there (the span containers, not their children).
Anyone have any ideas on how to get rid of them or why this is the case?
Help is greatly appreciated, thank you!
krzychek is correct in the answer above (main.css is overwritten by font-awesome-css.min.css) but if you cannot change the order of the files, then here's another way to do it:
CSS
#Portfolio > span {display:none;}
as I can see in dev tools, both styles are being applied to element, but one from font-awesome-css.min.css is chosen.
Is main.css placed after font-awesome-css.min.css?
I'm not CSS guru, but my guess is that main.css is placed before other css and therefore overridden by following rules :P
Also you can add !important directive after display:none. However it is smelly and better to avoid.
Add this code inside the head of your web page:
<style>
span.fa-stack { display:none !important; }
</style>
I have trawled the internet looking for a fix and i still cannot get padding to work on my FA Icons in a wordpress theme.
Caution, I am novice:
So, the icons are social media icons, using FA, and they are placed in a widget in the footer of the site.
I think i have assigned a class to the icons "social" but I have placed:
.social {
padding-left:20px;
}
In all style.css or custom.css or theme related .css's I can find and the icons still only have around 3px of padding, widget code is as follows:
<p>
<a target="_blank" href="link"><i class="fa fa-twitter-square fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-facebook-square fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-instagram fa-4x" class="social"></i></a>
<a target="_blank" href="link"><i class="fa fa-pinterest-square fa-4x" class="social"></i></a>
</p>
I'm sure I am missing something simple?
Regards,
Thomas
Add the social class to the same attribute:
<i class="fa fa-pinterest-square fa-4x social"></i>
Change the css property to:
.social {
padding-left:20px !important;
}
Please note that the css properties are assigned in the order they were defined in the css files. You must be sure that the .social is the last defined, in order to assign the padding-left you need.