I'm having a bit trouble with some font-awesome icons. I'm trying to increase the size of a few of them, but for some reason nothing I seem to do works.
Here is my html
<div class="span5 bookBuild">
<div class="well well-small">
<h4>Build your Book!</h4>
<div class="span2">
<i class="icon-file icon-large"></i>
</div><!--span2-->
<div class="span9">
<p>This is a paragraph</p>
</div><!--span9-->
<p class="clearfix"></p>
</div><!--well-->
</div><!--span5-->
and I have tried to add as you can see the icon-large class as well as the icon-2x class. None of the icon-2x - icon-4x are working.
I have also tried targeting the specific icon and then increasing the font size such as font-size: 3em;
Any help would be amazing!
we can make some icon bigger using font awesome. Font awesome provided a class to increse them.
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
http://fortawesome.github.io/Font-Awesome/examples/
This worked for me in bootstrap ONLY after I added !important, like this:
.fa-big{font-size: 100px !important;}
Use icon-4x instead of icon-large. See here: http://bootply.com/79841
Font Awesome is a font so add a class and increase the font-size
.fa-big{
font-size: 100px;
}
<i class="fa fa-ship fa-big"></i>
Related
I have been stuck on this for a little bit. I can't get the title and the font-awesome icon on the same line. The title is on the first line and the icon is rendered on the line after it. When I hit F12, I see that the width of the icon is taking up the entire line. I tried adding width but its not working. Here is my code
<div className="styles.titleStyle">
<div className="styles.boldStyle">
{"MyTitle"}
</div>
<div className="iconStyle">
<i className="fa fa-arrow-right fa-lg"></i>
</div>
</div>
in my style code
.titleStyle
display: inline
.iconStyle
margin: 0px
padding: 0px
display: inline
Any help is appreciated. Thanks
This has, actually, nothing to do with react at all, it's just basic HTML and CSS.
You use div elements that have the css style display: block by default, it means that every div will take the full width available so the next element will start on the next line. If the next element is styled with display: inline as your css class .iconStyle is, it will still be rendered at the next line after the block element. Long story short, just render the icon after the text
<div className="styles.boldStyle">
{"MyTitle"} <i className="fa fa-arrow-right fa-lg some-other-css-class"></i>
</div>
As you can see I have added another css class some-other-css-class to the icon, so you can style it as you like.
A bit of in-deep answer and some more errors you made:
className="styles.boldStyle" is not valid css class, you probably mean className={styles.boldStyle}, this also goes for className={styles.titleStyle}.
Fontawesome icons are rendered with style: inline-block, it means they will behave like small images in the text and will not break the text flow. The text-size css attribute of the outer element will also apply to them. Normally you put the icons before or after the text but not in extra div elements.
Also one tip: if you have a header element, like a title - you should use <h1> to <h5> depending on the depth of the header, that is basic SEO that does not cost any extra time during development.
All in all you code should look like that:
JS:
<div className={styles.titleStyle}>
{"MyTitle"} <i className="fa fa-arrow-right fa-lg"></i>
</div>
Style:
.titleStyle
font-weight: bold
I have a bootstrap row, with 4 columns in it. Originally I had 3 columns with icons, and they all aligned perfectly. I added a fourth in, and now the new one I added is slightly further down the page than the rest. It just doesn't sit in line
<div class="col-12 padding">
<h3>Also take a look at my Github, Free Code Camp, Team Treehouse and LinkedIn profiles!</h3>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-github icons"></i>
<h4>GitHub</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-free-code-camp icons"></i>
<h4>Free Code Camp</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fi-social-treehouse icons"></i>
<h4>Team Treehouse</h4>
</div>
<div class="col-xs-12 col-sm-3">
<i class="fab fa-linkedin icons"></i>
<h4>LinkedIn</h4>
</div>
It's the third column (team treehouse) that doesn't sit in line with the rest.
Also, they are all within a row div, it's just not shown.
EDIT:
It seems the problem is 3 of the icons are from Font Awesome, and the Treehouse icon is from Foundation Icons. Now I know the problem, but im not sure how to fix it. They are all styled to the same size
If you believe it is the icon, test your theory by adding a border to the icons class. This way you will be able to tell if the third icon is positioned oddly, or has padding built into the image itself. If that is the case copy the image and edit it to suit.
Or you can hack the offending icon with some CSS like so:
.fi-social-treehouse {
margin-top: -20px;
}
Well, I checked inside the CSS sheet for Foundation Icons and compared it to the CSS sheet of Font Awesome, and couldn't find a difference. So I ended up hard coding a negative margin to the column that the treehouse icon is within. If anyone has a better solution, I would be happy to hear it!
How can I link the user to a page using a href from a font-awesome icon when the user clicks onto it. Code is below HTML.
<div class="features-icons-icon d-flex">
</i>
</div>
Remove the a href and you will see the position change.
I want the icon to link to google but be in the same vertical line one after the other. For example like the other two icons which have not got the a href tag code.
The a tag is overriding the styles applied to the i tag.
Consider setting margin for that particular a tag as:
.features-icons-icon > a{
margin: 0px auto;
}
Fiddle or it didn't happen!
Just put FA classes to A tag.
Try this. Remove a tag and using onclick on i tag
<div class="features-icons-icon d-flex">
<i class="fa fa-desktop m-auto fa-5x text-danger" onclick="window.location.href='https://www.google.co.uk'"></i>
</div>
So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.
EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test/test04.png" alt="thumb01">
<div class="col-xs-3 col-md-6">
<div class="delivery alert alert-success">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
Delivery class:
.delivery{
position: absolute;
font-size: large;}
Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use #media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card, search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div, then just work with the elements using CSS (display and the float, for example). Have fun :)
MY CODE IS:
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div class="statistic-box statistic-filled-1">
<h1><span class=count-number>5251111111</span>TL</h1>
<span class=slight><i class="fa fa-play fa-rotate-270 text-warning"> </i> 28%</span>
<div class=small>Stok</div>
<div>
</i>
</div>
</div>
</div>
i want to edit the text so that it would fit and not disturb the server image, is there anyway to make this possible?
You could set the image as the divs background image & then set padding on the div.
Without seeing your CSS, it looks like you are probably using a background-image property on one of your div elements. The text appearing over top of it is how it's intended to work.
If you don't want this image to be part of the background, then I'd suggest removing that property and instead inserting a good old fashioned <img> element in the HTML instead.