Develop Reference

CSS Onclick Close (display none) Not Working, Responsive Design

I'm following the w3 tutorials and exploring a responsive design template here (see source code for details): https://www.w3schools.com/w3css/tryw3css_templates_analytics.htm
I'd like to edit the sidebar so that a close button is always displayed, and close the sidebar when clicked. Under it's current design, this only works for the mid-size and small windows.
I tried revising the code to remove the hidden class (so it's always displayed). However, the function does not close the sidebar when clicked:
From:
<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu">
<i class="fa fa-remove fa-fw"></i> Close Menu
</a>
To:
<a href="#" class="w3-bar-item w3-button w3-padding w3-dark-grey w3-hover-black" onclick="w3_close();return false;" title="close side menu">
<i class="fa fa-remove fa-fw"></i> Close Menu
</a>
I'm missing something very elementary here. But I've fiddled with this long enough I'd like to get pointed in the right direction. The code is right, I'm guessing this may be a DOM or bubbling issue, or basic design edit? Thanks!

There appears to be an !important media query CSS rule that's probably blocking your styling from having effect:
#media (min-width: 993px)
.w3-sidebar.w3-collapse {
display: block!important;
}
I did a document.querySelector("#mySidebar").style.display = "none" and it had no effect. You could remove that !important rule or otherwise work around it...

How to change the direction of a font awesome icon?

I am using the font-awsome library to show a unlock icon .
So, By default the direction is in right direction, I want to change that to the left.
<i class="fas fa-unlock-alt"></i>
SO, is there any way through which I can change the direction of the unlock icon ?

You can use the fa-flip-horizontal class as documented here.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<i class="fas fa-unlock-alt"></i>
<i class="fas fa-unlock-alt fa-flip-horizontal"></i>

You can rotate and flip icons with font awesome. In your case you can try this:
<i class="fas fa-unlock-alt fa-flip-horizontal"></i>
Check out this link for more information https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

Considering the JS+SVG version you can use flip-h to flip the icon horizontally
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<i class="fas fa-unlock-alt" data-fa-transform="flip-h"></i>
More details: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

How to attach NGBootstrap tooltip to font awesome icon

Trying to add a tooltip to a font awesome icon in an Angular page. The normal Bootstrap method seems to be ignored so I am trying to use the NGBootstrap method used for adding a tooltip to buttons, but the tool tip never displays. https://ng-bootstrap.github.io/#/components/tooltip/examples
The typical Bootstrap method causes an error of Cannot set property 'title' of undefined when hovering.
<i class="fa fa-info-circle" data-toggle="tooltip" title="Name here"></i>
In the component:
ngafterviewinit() {
$(function() {
$('[data-toggle="tooltip"]').tooltip();
}
};

You can also try using button tag.
<div class="infoCSSClass">
<button class="icon-info" data-container="body" ngbTooltip="Here is tooltip text" #toolTip="ngbTooltip" (click)="toolTip.open()" placement="top"></button>
</div>

This seems to work:
<i id="icon" class="fa fa-1x fa-info-circle" [ngClass]="icon" aria-hidden="true" placement="right" ngbTooltip="tipContent"></i>

Never show two divs at the same time

I'm working on a project where ng-cloak is unavailable due to the way the css files are loaded, so I'm looking for a less worse solution and have tried a few different things.
I never want to show these two icons at the same time. The problem is, the bottom one (angle right) shows up briefly since the promise for the data source is still resolving. How can I make sure these two icons will never show up at once?
<i class=" fa invalid-data-icon fa-angle-down" ng-hide="vm.hideInvalid"
ng-show="vm.data.datasources.length">
</i>
<i class="fa invalid-data-icon fa-angle-right" ng-show="vm.hideInvalid"
ng-hide="vm.data.datasources.length">
</i>
EDIT:
went with this from the accepted answer:
<i class=" fa invalid-data-icon fa-angle-down" ng-class="{'rotate-icon':vm.data.datasources[1].length==0 || vm.hideInvalid}"></i>

First using but ng-show and ng-hide in the same tag is a pretty bad idea.
You should do something like :
<i class=" fa invalid-data-icon fa-angle-down"
ng-show="vm.hideInvalid==false && vm.data.datasources.length==0">
</i>
<i class="fa invalid-data-icon fa-angle-right"
ng-show="vm.hideInvalid==true && vm.data.datasources.length==0">
</i>
Considering that as long your promise is not resvoled you would have initialize hideInvalid and datasources to undefined.

Alternative approach: Only use one icon in your code, and rotate it with a css class:
<i class=" fa invalid-data-icon fa-angle-down" ng-class={'rotate-icon':!!vm.data.datasources.length}></i>
(my Angular skills are a bit rusty, but you get the jist...)
Then in your CSS, something like this:
.rotate-icon {
transform: rotate(-90deg)
}

i want to change the element image with text in html/stylesheet

am using this code to make hidden dropdown list but instead of that magnifier icon at topright corner, i want to replace it with text "search" or somethinf else, how can i do that? i am a newbie, please excuse me.
link of files https://drive.google.com/folderview?id=0B7cm2DCx8TxvflJKUy1KNU5fbmo1eDJCVU1mQW1FdEtVOE9FbDEzZlM4LVNXSkhVOUlfSUk&usp=sharing

Now you'r loading an icon so change this:
<li><i class="fa fa-search fa-lg"></i></li>
To this:
<li>Search</li>
https://jsfiddle.net/razitazi/3r18zngb/