Might be a naive' one - but I am sort of stuck on how to put a icon in topcoat icon button. I am creating a dynamic list with delete and modify buttons (which I want to be icons).
Any help is appreciated ...
<button class="topcoat-icon-button">
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
It is not a naive one, I also came from Bootstrap, was scratching my head, and could not find any useful documentation. First of all, you need to know that the icons are in a different repository: https://github.com/topcoat/icons
The easiest way to go is to use the font. So you need the font directory from that repository. The icomatic.html file and the js folder is the icons showcase, you should not deploy them. The icomatic.js seems to be a fallback mechanism to Unicode symbols, but as far as I understand it works with DOM replacements and thus probably needs some tweaking to work together with AngularJS. You can probably delete it as well, if you do not need the fallback.
Then you need to do the necessary HTML "includes", assuming the icomatic files are available at lib/icomatic:
<link rel="stylesheet" href="lib/icomatic/icomatic.css"/>
Then you can apply all this to your example by using the icomatic class and a glyph, e.g. "alert":
<button class="topcoat-icon-button">
<span class="topcoat-icon icomatic" style="background-color:#A5A7A7;">alert</span>
</button>
It will still require some styling, but at least you should see an icon.
Related
I've built out a react data grid. I've added the sortable optional feature and on my system is working with the sort icon(s) rendering to the right of the header text, which is how I'd prefer it.
Others in my group have pulled my code when they run it the sort icon is rendered to the left of the header text (I'm assuming somehow inserting the pull-left style to the icon span).
I can find no information that outlines how exactly this can be controlled, or why it would work differently from one system another.
Hopefully someone is still using this component that can shed some light on this.
You should be able to target the icon and override with CSS. If you inspect the element in Dev tools, it will tell you the classname of the icon. Use CSS to move its position.
I upgraded from ng-grid to ui-grid. The grid works fine including sorting, filtering and moving. I even have the correct font files and have them mapped properly. However I have no icons what so ever. I am not even getting "funky chars" because of the missing font file.
To show the order of the sort, nothing in the pagination buttons, nothing in the header row and nothing to show there is a dropdown menu. Does any one know if "ui" vs "ng" they removed anything like that?
How do I get the pagination to show something for the user to see and how do i show icons for the sort direction in the headers?
The current UI-Grid CSS file definitely has that ui-grid-icon-up-dir class; here's the relevant snippet:
/* '썘' */
.ui-grid-icon-up-dir:before {
content: '\c359';
}
Since the ui-grid-icon-up-dir class is not defined in the CSS file you examined, that file must be outdated (perhaps a cache- or path-related issue?) To test that theory, you could try temporarily changing your CSS link to the current UI-Grid CSS to see if those icons appear:
<link href="http://ui-grid.info/release/ui-grid-unstable.css" rel="stylesheet">
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.
i want to make a text, that changes in a loop, with a fade between the changes. I dont no javascript so im not able to make it on my own, i tried to google it with no luck. maybe im just search for the wrong thing but nothing pops up.
Heres a page where they use it right under the banner picture:http://www.spabad.dk
No using javascript means you want to do this in pure CSS. It could be difficult to get the exact result that you want, although you can find effects close to what you need : See here.
If you are ok with using javascript, this is what you're looking for (note that jquery was included, this is a javascript library that simplifies its use. You can easily include it in an html page by putting <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> in your <head>
Hope that helps!
Sources: Simple CSS Animation Loop – Fading In & Out "Loading" Text and
How to make this jQuery animation code loop forever?
I want to apply something like this
a:visited{background-color:#0F0;}
to all <a> tags, if at least one of them has been clicked.
I know how to do it using JavaScript, but is there a pure CSS version?
I doesn't have to be <a> or :visited, I just want to highlight all occurrences with a certain tag or class if just one of them gets selected/hovered.
I'm not too clear on the effect you want, and why you want it, but there's no way to do this with CSS, you're stuck using javascript :(
As I understand, you want to style all <a> tags if one has been hovered or clicked? Why not just make that the default style, it will probably only take 2 seconds until that happens.