I know this sound crazy or easy but I'm not getting any result.
I'm working on bootstrap accordion and I'm trying to figure out how to write in CSS to allow show ALL color Blue in (icon, text and background color) in at the SAME TIME using CSS :focus when person clicked the link or accordion...
please see one line of accordion of codes...
<i class="fa fa-user" aria-hidden="true"></i> Members
or please see the whole sample of each accordion buttons...
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<dl class="accordion">
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i> Manage</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
<div class="list-group">
<i class="fa fa-tachometer blue" aria-hidden="true"></i> Dashboard
<i class="fa fa-users" aria-hidden="true"></i> Members
<i class="fa fa-clipboard" aria-hidden="true"></i> Posts
<i class="fa fa-tachometer" aria-hidden="true"></i> Vestibulum at eros
</div>
</dd>
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i> Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
<div class="list-group">
<i class="fa fa-user" aria-hidden="true"></i> Members
<i class="fa fa-clipboard" aria-hidden="true"></i> Posts
<i class="fa fa-comments" aria-hidden="true"></i> comments
<i class="fa fa-user-secret" aria-hidden="true"></i> Privacy
<i class="fa fa-bell" aria-hidden="true"></i> Notifications
<i class="fa fa-envelope" aria-hidden="true"></i> Emails
<i class="fa fa-globe" aria-hidden="true"></i> Sites Infor
</div>
</dd>
Related
I have added the class center-block to be able to vertical center the Torza image. But no result, any suggestions?
<?php
<div class="container">
<hr />
<div class="text-center center-block">
<img src="img/logo_torza.png" alt="Torza" width="85">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i>
</div>
<hr />
</div>
?>
You can use the code below:
HTML
<div class="container">
<hr />
<div class="torza-box">
<img src="img/logo_torza.png" alt="Torza" width="85">
<div class="links-box">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i></div>
</div>
<hr />
</div>
CSS
.torza-box{
position:relative;
}
.links-box{
position:absolute;
top:50%;
right:10px;
transform:translatey(-50%);
}
if you added bootstrap CSS URL then this work as good, otherwise you write simple CSS code here...
.center-block a {
display:inline-block;
vertical-align:middle;
}
or view jsfiddle Demo
Thank you
Don't add it as a class, in that div tag use this:
<div style="text-align:center, margin-left:auto, margin-right:auto>
and i'm not sure why this is in php tags, this won't work with html unless you're echoing it.
Either get rid of the php tags or at the beginning write echo" and at the end write ";
Either replace it with this:
<?php
echo"
<div class="container">
<hr />
<div class="text-center center-block">
<img src="img/logo_torza.png" alt="Torza" width="85">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i>
</div>
<hr />
</div>
";
?>
or just get rid of the <?php?> tags
I need to group 2 icons like . I've tried to use fa-stack class but it overlaps the images and I don't know how to put one above another.
<span class="fa-stack fa-lg">
<i class="fa fa-envelope fa-stack-1x"></i>
<i class="fa fa-ellipsis-h fa-stack-2x"></i>
</span>
If you are using same structure, you can move the second icon little up using css negative margin.
<span class="fa-stack fa-lg">
<i class="fa fa-envelope fa-stack-1x"></i>
<i class="fa fa-ellipsis-h fa-stack-2x"></i>
</span>
span i:not(:first-child){
margin-top:-15px;
}
Here is an example
I'm trying to close the gaps/margins between the social icons and have it centered under the text.
Jumbotron
Here is the code:
div class="jumbotron"><!-- Jumbotron -->
<div class="container1">
<p>A blog to explore, learn, and share Electro Funk, Soul, & Hip Hop Music</p>
<div id="social"><!-- Social Icons -->
<div id="twitter" class="col-md-4">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
Twitter
</div>
<div id="instagram" class="col-md-4">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
Instagram
</div>
<div id="soundcloud" class="col-md-4">
<i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i>
Soundcloud
</div>
</div>
</div>
It would probably be better to not use separate columns for each icon and instead use one column surrounding them all:
<div id="social" class="col-md-12 text-center"><!-- Social Icons -->
<div id="twitter">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
Twitter
</div>
<div id="instagram">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
Instagram
</div>
<div id="soundcloud">
<i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i>
Soundcloud
</div>
</div>
Icons are misaligned if I use directive and working fine if I used plain html code..
Method 1) font awesome icons using directives (icons are horizontally misaligned):
js:
app.directive("roIcon", function() {
return {
restrict: "E",
templateUrl: "templates/roIcon.html",
scope: {
type: "#"
}
};
});
"roIcon.html" template:
<span ng-if="type === 'add'">
<i class="fa fa-plus"></i>
</span>
<span class="fa-stack fa-lg stacked-icons" ng-if="type === 'export-file'">
<i class="fa fa-file-o fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-arrow-right fa-small fa-stack-1x"></i>
</span>
</span>
<span class="fa-stack fa-lg stacked-fork" ng-hide="isTile == true" ng-if="type === 'start-workflow'">
<i class="fa fa-code-fork fa-rotate-90 fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-plus fa-small fa-stack-1x"></i>
</span>
</span>
Icons directive included in html:
<ro-icon type="add"></ro-icon>
<ro-icon type="export-file"></ro-icon>
<ro-icon type="start-workflow"></ro-icon>
Method 2) Direct inclusion of icons into html file is working fine:
<span>
<i class="fa fa-plus"></i>
</span>
<span class="fa-stack fa-lg stacked-icons" title="export file">
<i class="fa fa-file-o fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-arrow-right fa-small fa-stack-1x"></i>
</span>
</span>
<span class="fa-stack fa-lg stacked-fork">
<i class="fa fa-code-fork fa-rotate-90 fa-stack-2x"></i>
<span class="fa-stack stack-bg">
<i class="fa fa-plus fa-small fa-stack-1x"></i>
</span>
</span>
The only difference I can see in both the view source is the icons rendered with directives contains a wrapper non-html tag ...., the rest of the html is same.
I am not able to find out whether this non-html tag is making any difference in alignment as shown in figure?
Appreciate your help..
How can I have stacked icons and apply fixed width to both icons (or to the stack itself)?
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</p>
</div>
The above example does not result in a fixed width icon. Adding fa-fw to the span class does not resolve the issue. Thoughts?
Seems that a newer version of Font Awesome fixes this issue. I am using v4.4 below.
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<br>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
In order for the rest of the icons in the list-group to appear with the same fixed width they have to be stacked behind an empty icon.
I did not test it but what if you try :
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop" style="font-size:20px"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse" style="font-size:20px"></i>
</span> Some text
</p>
</div>
... and adjust the values to fit the width attempted.
If it works, you could overwrite the original styles .fa-stop, .fa-exclamation ... directly in your CSS stylesheet. Maybe you will have to use !important hack.