i'm working in design using bootstrap framework
and i face problem with some screen sizes as this website is responsive
i can solve this problem by target every media but i think that there are a solution by using defined class with bootstrap
the problem i just want to center some element in center in all media screen ,to explain it i prefer using images
in the large screen thre's no problem
but in other media
this is code hint
<div class="socialicons center-block">
<i id="social-user" class="fa fa-facebook-square fa-2x social-fb"></i>
<i id="social-user" class="fa fa-twitter-square fa-2x social-tw"></i>
<i id="social-user" class="fa fa-google-plus-square fa-2x social-gp"></i>
<i id="social-user" class="fa fa-linkedin-square fa-2x social-tw"></i>
</div>
i tried this css
display: block;
margin-right: auto;
margin-left: auto;
and
margin :0 auto;
thanks for your comments guys
i made as #amitrh indicates and this work fine with the first block of items and works like this in all screen
and the links appear in center as i want and in block by apply this code
.socialicons {
display: table;
margin: auto;
for the second block in the last it have another bahavior as the font icons was bigger than the icons in the first like this
and this too
so i changed the css to
display: inline-table;
margin: auto;
and works fine and center in left in all screen like this
thanks for your comments and code hints as you saved my time and this help me to solve my issue without css hacks or additional unnecessary code
#box86rowh #amitrh #BootstrapBoogie - Christina
Related
My Web app is using font awesome latest version (6.1.1) and it is working perfectly as I'm adding fontawesome icons. Now I added a new icon whose height and width are coming as zero in the browser. Code is:
<button type="button" class="btn btn-danger">
<i class="fa fa-trash-xmark" aria-hidden="true">
</i>
Delete
</button>
<i> is coming as 0 width and height. Any ideas why? A screenshot showing this problem is attached here.
Thanks
Try making the i element display inline-block with some height and width.
i{
display: inline-block;
height: 1rem;
width: 1rem;
}
If this does not work, then, there is problem elsewhere. If it does work, check your stylesheet to see if there is an overflow or layout problem.
I am currently a student learning HTML and CSS. I was tasked with an assignment to replicate a single webpage. However, I am having difficulties getting the icons to look like what is shown in the model provided to replicate. The images below show what the icon area of the model should look like versus what I have, and also what the original icons looked like when just added to the HTML before color or size adjustments were made.
Original icon area of the model provided.
How close I have gotten to it
Original icons before size and color adjustments were made
I need to get the edges to be sharp and the white areas above and below the icons to be removed. I tried setting the border-radius, margin, and padding to 0px or 0% and nothing still works. I also tried using text-shadow.
My HTML code for the icon area is
'<div class="icons">
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>
<i class="fab fa-dribbble-square"></i>
<i class="fab fa-tumblr-square"></i>
<i class="fas fa-rss-square"></i>
</div>'
And CSS
'i{
display: inline-flexbox;
font-size: 24px;
color: #3E5A99;
background-color: #E5EEFF;
margin-bottom: 50px;
}'
I am asking for some advice on how to get this done, please. Thank you in advance.
The short answer is no, you cannot edit the FontAwesome webfont icons without downloading, editing, and reuploading the individual svgs.
I would use the background-less versions of these icons and then put them each inside a div. Then you can set the div border-radius, background-color, etc. to exactly what you need.
A couple of pointers with this process:
Use display: grid; for each container div, that way you can also add place-items: center; to super-center each icon inside of it's div.
Please look at the social widget on the footer of this site:
https://www.publictalksoftware.co.uk/
This screen grab is from Microsoft Edge:
I can't seem to get those icons to be centered under the heading. On my handheld devices (like my iPhone) it does show centered:
This is the HTML for the widget:
<div class="textwidget">
<div class="social animateblock">
<div class="fa-icons">
<a href="https://www.facebook.com/publictalksoftware/" rel="noopener noreferrer" target="">
<i class="fa fa-facebook"></i></a>
<a href="https://www.youtube.com/channel/xxx" rel="noopener noreferrer" target="">
<i aria-hidden="true" class="fa fa-youtube-play">
</i></a>
<a href="https://www.publictalksoftware.co.uk/feed/" rel="noopener noreferrer" target="">
<i class="fa fa-rss"></i></a></div>
</div>
</div>
I have tried setting the margins for left and right to auto but it is not working for browsers. Confused.
To center your content, add the following styles to your .textWidget class:
display: flex;
justify-content: center;
Note: I tweaked the padding to only keep the top 10px spacing. Of course, you can change the padding to whatever you need. It's your project.
I applied these styles using the developer tools in Google's Chrome browser. Your mileage may vary, but the styles seemed to keep pretty stable across the different breakpoints you have set on your site. Here are some screenshots of my test:
Here's the element before applying flexbox (viewport width: 824px)
Here's the element after applying flexbox (viewport width: 824px)
Anyway, I hope this helps you. Cheers & Good luck!
I want to resize the social icons on the top header of this website http://petlet.net.au/
I thought that the logo's are images but I think these logos are from a library or from external because when you inspect the code there's no <img src> code.
This is the code:
How can I resize the social icons?
Use fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-facebook-square fa-lg"></i> //smallest
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-facebook-square fa-5x"></i> //biggest
Whenever icons are used as svg icons you can resize them by just changing font-size. They can be colored, not colored, multiple shapes, sizes, whatever.
.header .fa {
font-size: 15px; // you can increase or decrease font size as per your needs.
}
.header .fa-facebook-square {
font-size: 18px; // you can change font-sizes of different icons indiviually
}
Using font-size css property you can resize the font-awesome fonts.
Try this:
.top-header-content a{
font-size:20px;
}
For newer version use icon-2x, icon-3x etc.
<i class="icon-camera-retro icon-4x"></i>
Refer http://fontawesome.io/3.2.1/examples/
Just use font-size property of CSS to resize the social icon buttons
Weird problem with Font Awesome. I'm trying to make a larger circle around my social media icon.
If I change the first stacked icon to a size larger than 2x, it reverts back to the 1x size.
This code works:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
This code doesn't:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin fa-stack-3x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
If I use 3x or 4x, etc, the lower image gets set back to the normal size. Is this a bug, or am I doing something wrong here?
Using Font Awesome v 4.1.0.
EDIT - because this note keeps getting views / comments. My problem was that font-awesome only has the 1x and 2x proportions, where I wanted a much larger background image and a smaller icon (at more like like 4x).
This confused me too until I re-read the instructions a few times:
"You can even throw larger icon classes on the parent to get further control of sizing."
So you leave the icons alone and simply swap .fa-lg for .fa-2x on the parent and the child icons grow proportionately.
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
Fairly old solution and lots of similar comments above but wanted to tell one thing I ended up doing in case anyone encounters a similar thing. I needed the the outer font to be the regular size and the inner to be smaller. I didn't feel like creating a class for this since it's only used in a single place. I ended up just adding a style class to the inner font.
<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x" style="font-size:9px"></i>
</span>
If you have a 1 off that you need something similar then you could consider the above or create additional classes to do it if you are using in lots of places. If I were to create classes, I would had done something similar to (untested)
fa-stack-xs {font-size:.6em}
fa-stack-sm {font-size:.8em}
So, they could be used like
<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x fa-stack-sm"></i>
</span>
I didn't see in the documentation anything like this so my apologies if I missed it.
To get it to work as I expected it to, I changed font-awesome CSS file. At line 168, it looks like this:
.fa-stack-1x,
.fa-stack-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
Notice that the stack only has 1x & 2x options. So I added a 3x & 4x.
.fa-stack-1x,
.fa-stack-2x,
.fa-stack-3x,
.fa-stack-4x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.fa-stack-1x {
line-height: inherit;
}
.fa-stack-2x {
font-size: 2em;
}
.fa-stack-3x {
font-size: 3em;
}
.fa-stack-4x {
font-size: 4em;
}
You may have to tweak a bit more to get it to line up just right. The higher the em's go, the less they line up correctly in different browsers.
But, in the end, I ended up using a border because we wanted to do something different on phone sizes, and it was simpler to edit that CSS in the #media queries.
The class fa- thin-circle-seems to only support 2x, use CSS (font-size)
.dimensioni_fix {
font-size: 40px; /* EDIT THIS */
}
http://jsfiddle.net/itpao25/8yPDh/
It may not solve your problem but is this the kind of effect you are looking to create?
<span class="fa-stack fa-2x">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
Because font-awesome clearly specifies 1-x and 2-x for stacking and then using larger parent classes for bigger stacks.
From: http://fortawesome.github.io/Font-Awesome/examples/#stacked
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.