I'm using Material Design Lite tabs (as with the template shown at https://getmdl.io/templates/text-only/index.html). I would like the links to have an icon as with the Github and download link on the MDL site itself: https://getmdl.io
However, on the MDL site they are actually using a navigation bar, so I'm at the moment unsuccessful to repeat this look with the tabs.
The answer is actually quite simple, although the alignment of the icon and the following text seems to be off a bit (icons is a bit too high). You just add a span with the correct classes:
<a href="#download" class="mdl-layout__tab">
<span class="icon material-icons">get_app</span>
<span>Download</span>
</a>
Related
In an Angular app I'm building, I have a toolbar component with three links. The first leads back to the app, the others to different components. Both link elements have class="mat-button" applied, because I wanted to use existing styling.
The first component contains a button with attribute mat-raised-button.
The second component just contains text.
When the application initially loads, the toolbar looks ugly.
When clicking the second link, the second component is loaded, but the toolbar is still ugly.
When clicking the first link, the first component is loaded and the toolbar looks much better.
If I then click Home, I go back to the app page and the toolbar still looks good.
What I see in the toolbar is that the link elements have very little style applied initially:
Once I've clicked the first link, they have much more style applied:
But I thought if I load a module in AppModule, all of the module is loaded, including any available styles.
How can I make it so that the toolbar is pretty also initially? I could just use something other than mat-button, but I'm genuinely curious why this behaviour manifests.
StackBlitz with relevant code: https://stackblitz.com/edit/angular-wwlrtv
I changed the toolbar from
<mat-toolbar>
<a routerLink="" routerLinkActive="active" class="mat-button">Home</a>
<a routerLink="path1" routerLinkActive="active" class="mat-button">Link 1 - Style is applied</a>
<a routerLink="path2" routerLinkActive="active" class="mat-button">Link 2 - Nothing happens</a>
</mat-toolbar>
to
<mat-toolbar>
<a routerLink="" routerLinkActive="active" mat-button>Home</a>
<a routerLink="path1" routerLinkActive="active" mat-button>Link 1 - Style is applied</a>
<a routerLink="path2" routerLinkActive="active" mat-button>Link 2 - Nothing happens</a>
</mat-toolbar>
and this fixed the problem.
I've just had it with a new Angular 11 installation. Everything is by the book, default values, been close to copy-pasting elements from the material docs so far.
Suddenly I realized the mat-toolbar (MatToolbarModule) has no styles and appears like a white space on the page:
After the first click on any button, the styles would load and stay until the next page reload. I had to go back and check the set up and I found that the MatCheckboxModule was not imported. There was no compilation errors/warnings.
Not imported module would break the styles that belong to other modules. All modules must be imported.
After importing the Checkbox module the styling went to normal.
I'm building a table using Semantic UI, in which I added icons using Semantic's <i> tag like this:
<i class="audio description icon">
The icon shows up in the table, but regrettably the alignment is not that great.
Is this normal behaviour or am I missing something?
I'd like to add a fontawesome icon to a shortcodes ultimate tab title.
When I try to do it inline
<i class="fa fa-500px"></i>
nothing comes up. Is it possible, either using CSS or some other means?
[font-awesome-icon] Tab text 1
[font-awesome-icon] Tab text 2
[font-awesome-icon] Tab text 3
For using shortcodes, there is a plugin which fetches the latest font awesome icons:
https://wordpress.org/plugins/better-font-awesome/
It works like this:
[icon name="fa-flag" class="fa-2x fa-spin fa-border"]
They have also alternatives syntaxes for previous versions (with the icon- class names).
There are two ways to use Materilize Icon:
<i class="mdi-ICON-NAME"></i>
<i class="material-icons">ICON_NAME</i>
In the official site I did not find guide or icon chart for using the font in this way <i class="mdi-ICON-NAME"></i> but there is guide on how to use the icon in this way <i class="material-icons">ICON_NAME</i> here.
So, when official site doesn't have guide on how to use the icon in this way <i class="mdi-ICON-NAME"></i>. Then why is it defined all over the stylesheet (materialize.css).
Also, if I need to call the icon this way <i class="material-icons">ICON_NAME</i> then I need to link one for font file. Eg.<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">. Hence, I feel that 2 fonts will be loaded into the DOM which is not needed, right?
My quesiton is: Where can I find Icon chart if I need to use icon in this way <i class="mdi-ICON-NAME"></i>?
I got it answered by Materialize team:
https://github.com/Dogfalo/materialize/issues/1824#issuecomment-125949178
For question: Where can I find Icon chart if I need to use icon in this way <i class="mdi-ICON-NAME"></i>
I got answer: The mdi type icons are being phased out for the official google sources, that's why you won't find the old chart in the documentation. A complete list of the new icons can be found in https://www.google.com/design/icons/
For question: Why not just delete all the mdi icons and css defined as new icons are already offered by google, isn't it?
I got answer: Because that would suddenly break all the user implementations, so this way it can be phased out gradually, giving people time to update their icons.
If you really need to check the old implementation, you can go through the commit history from https://github.com/Dogfalo/materialize/blob/master/icons.html and look at a version before the google icons were added.
You can find the full list of icons here https://www.google.com/design/icons/
The naming is mdi-category-iconname.
An example:
<i class="mdi-action-search"></i>
For some reason the font-awesome social media icons refuse to show up on any browser. All other icons seem to work perfectly fine though... I've included a photo of the page opened in Mozilla with inspect element(linked due to no reputation). The only loaded css files are bootstrap and awesome-font.
It looks like you thought the text description of stacks was the class names. Icon stacks should look like this, there is no on class:
<span class="icon-stack">
<i class="icon-minus icon-stack-base"></i>
<i class="icon-camera icon-light"></i>
</span>
In your example, the second class overwrites the first class. This is because your using both classes on the same element, instead of stacking them.