i can't change my icon font "follow" on my footer.
<!--footer-->
<footer>
<div class="container text-center">
<div class="row">
<div class="col-sm-12">
<p>Copyright © 2020 | All Rights Reserved by <a href="https://twitter.com/gigihhimself">Gigih
Pratama</a></p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa fa-twitter" aria-hidden="true"></i> Follow
</div>
</div>
</div>
</footer>
<!--end footer-->
i can't change my icon font "follow" on my footer. help me with CSS
There is a css property font-family, you can set any font-family using that. In your case - you want to change the font-family of follow. Just give a class name to your a tag and set font-family for this class.
.follow {
font-family: Helvetica;
}
<div class="row">
<div class="col-sm-12">
<i class="fa fa-twitter" aria-hidden="true"></i> Follow
</div>
</div>
Related
img
please see this image, you can see there is a small logo on the left, I want to increase its size how to do that? The code is in the image and in text format here too. Please help me fix it.
<div class="topbar-wrapper">
<header class="header2">
<div class="top-wrappers">
<nav class="top-gridnav">
<div id="breakingnews"><span class="breakhead"><i class="fa fa-circle-o-notch fa-spin"></i> Trending</span>
<div id="adbreakingnews"><span>No result!</span></div></div>
<div class="top-navigation-right">
<div class="top-social-wrapper">
<div class="social-icon"><i class="fa fa-youtube-play"></i></div>
</div>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
</div>
Use font-size property in style attribute or change it by css.
I have added as 20px.
Hope that Helps.
<div class="topbar-wrapper">
<header class="header2">
<div class="top-wrappers">
<nav class="top-gridnav">
<div id="breakingnews"><span class="breakhead"><i class="fa fa-circle-o-notch fa-spin"></i> Trending</span>
<div id="adbreakingnews"><span>No result!</span></div></div>
<div class="top-navigation-right">
<div class="top-social-wrapper">
<div class="social-icon"><i style="font-size:20px" class="fa fa-youtube-play"></i></div>
</div>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
</div>
please help me i am writing html document and having a problem. can you tell why my footer is not increasing from its edges even if i select width 100% please help
this code is not compelte i have not given css please click link at bottom to see my problem
enter code <footer class="footer-distributed">
<div class="footer-left">
<img src="https://i.pinimg.com/originals/b7/b3/96/b7b396047648c1baa436937d0afdfa76.jpg">
<h3>About <span>just do it</span></h3>
<p class="footer-links">
Home
|
Blog
|
About
|
Contact
</p>
<hr>
<p class="footer-company-name">
copyright © 2021 kaustubh krishna</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>find about us at our social media</p>
<div>
<i class="fa fa-envelope"></i>
<p>support#justdoit.com</p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
We offer freelance services for you and your company </p>
</div>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div> here
link of document: https://codepen.io/kaustubh0711/pen/XWNdNrv?editors=1100
Your .small-container div has a max-width css style keeping it from taking up the entire width of the screen. You'll also have to remove the left and right padding from it or else you'll still have gaps on each side of your footer.
You have to close the .small-container and .row, they affect the footer.
<div class="small-container">
<div class="row">
... content ...
</div>
</div>
<!-----footer---->
i want to show 3 tiles in a one row. 3 tiles should come in one row in the mobile view also.now im able to see only 3 tiles in one row but in mobile its showing two tiles in a row. how to make 3 tiles should cover complete row and same 3 tiles i need to show mobile also .im using adminlte theme for the design
code pen
https://codepen.io/krishnakernel/pen/VQQyaV
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>64 ℃<sup style="font-size: 20px"></sup></h3>
<p><span>Oil Temperature</span></p>
</div>
<div class="icon">
<i class="fa fa-thermometer-3"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>88<span style="font-size:30px">Amp</span></h3>
<p>R Current </p>
</div>
<div class="icon">
<i class="fa fa-flash"></i>
</div>
<a href="" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>233 <span style="font-size:20px">⚡</span> </h3>
<p>R Voltage in kva</p>
</div>
<div class="icon">
<i class="fa fa-bolt"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
You didnt close the div properly
Change <div class="col-lg-3 col-xs-4">
Try changing the classes to col-xs-4 for all the elements you want to have displayed in a row.
In bootstrap, the grid summ need to be equal 12. Then if you want the xs to be a row, you need to change to col-xs-4 because you only have 3 div.
Check more info here: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you want your layout to always be three columns use the xs breakpoint. The different breakpoints are designed to change the layout based on screen size.
I've created a simple button link in my page with container-fluid and row classes so that I can take utilize the whole available width of the page for the link button.
However, my code doesn't result in the button taking full width of the page. Attached is the screenshot of the said output.
Please inform me as to what I'm doing incorrectly. Thanks in advance.
[Basically what I want is that the well in the below screenshot should take 100% (or atleast 90% and centered) of the page width.]
My HTML and CSS codes are mentioned below:
My HTML Code:
<div class="container-fluid">
<div class="row">
<section id="access_list_session" class="col-sm-12">
<br/>
<p id="form-header"> Access Colleague List </p>
<br /><br /><br />
<div class="row">
<div class="hidden-xs hidden-sm col-md-4">
<i class="fa fa-5x fa-cogs" aria-hidden="true"></i>
</div>
<div class="well col-xs-12 col-sm-12 col-md-8">
<div id="form_link">
<i class="fa fa-list-alt" aria-hidden="true"></i> Click to access our Colleague List<br /> <span style="font-size: 10px; text-align:center;"">(Use of this list is subject to our Privacy Policy and other T&C)</span>
</div>
<br/>
<hr>
<p> In case of any difficulty please contact the site administrator using the form below.</p>
</div>
</div>
</section>
</div>
</div>
My CSS Code
#form_link a
{
width: 100%;
font-size: 1em;
}
.row
{
padding-top: 60px;
height: 60em;
width: 100%;
}
2 solutions IMHO :
Add in .row
.row {
margin: auto;
}
to center your block (see https://jsfiddle.net/os7frkq5/1/)
or simply delete width: 100% :
(see https://jsfiddle.net/os7frkq5/2/ )
I don't know if this is what you mean but you can try this:
<div class="container-fluid">
<section id="access_list_session" class="col-md-12">
<br/>
<p id="form-header"> Access Colleague List </p>
<br /><br /><br />
<div class="row">
<div class="hidden-xs hidden-sm col-md-4">
<i class="fa fa-5x fa-cogs" aria-hidden="true"></i>
</div>
<div class="well col-xs-12 col-sm-12 col-md-12">
<div id="form_link">
<i class="fa fa-list-alt" aria-hidden="true"></i> Click to access our Colleague List<br /> <span style="font-size: 10px; text-align:center;"">(Use of this list is subject to our Privacy Policy and other T&C)</span>
</div>
<br/>
<hr>
<p> In case of any difficulty please contact the site administrator using the form below.</p>
</div>
</section>
</div>
What you want is the a element to use block-display.
a { display: block }
Read up on the differences between inline and block elements, because it's vital to the way they're laid out.
I'm having difficulties aligning my headline and paragraph text in a "well". The "none" you see is a class to remove specific margins and is not relevant to what I'm trying to accomplish.
Here is my code
<div class="col-md-4 none">
<div class="well none">
<i class="fa fa-user fa-4x fa-fw"></i>
<h3>Test</h3>
<p>text goes here</p>
</div>
</div>
Here's what it's doing and what I want it to do.
Thanks for your help!
I would suggest you to make slight change in your html structure and wrap your text content inside the div and set its display as inline-block
<div class="col-md-4 none">
<div class="well none">
<i class="fa fa-user fa-4x fa-fw"></i>
<div class="text">
<h3>Test</h3>
<p>text goes here</p>
</div>
</div>
</div>
and css for that additional div is
.text {
display:inline-block;
}
Js Fiddle Demo
I would do this the following way. I like to use nested rows where ever possible to keep things clean.
/** CSS **/
.well h3 {
margin-top:0px;
}
.fs48 {
font-size:48px;
}
/** HTML **/
<div class='row'>
<div class='col-md-4'>
<div class='well'>
<div class='row'>
<div class='col-xs-3 text-center'>
<span class='glyphicon glyphicon-user fs48'></span>
</div>
<div class='col-xs-9'>
<h3>Test</h3>
<p>text goes here</p>
</div>
</div>
</div>
</div>
</div>
See a working example here : http://jsfiddle.net/D2RLR/6779/
You can simply replace the glyph with the font awesome class.