I am using materialize (www.materializecss.com) to develop and website. I am using icons (similar to glyphicons in bootstrap) to make them appear as buttons. I am unsuccessful so far.
Js Fiddle for the same: https://jsfiddle.net/a06n54pa/
I want the images to appear similar to the reply, retweet and favorite buttons of twitter as shown in picture.
Thanks in Advance.
You could just wrap a button with an anchor tag, or in your case your button icon.
Something like this should work.
<button><i class="anyIconYourUsing"></i></button>
you are using materializecss framework which have material icon try to include glyphicons from bootstrap customize tool or use icomoon to create custom font icon build
hope this help
Related
This "image slider? thing. What is it called?
If you go to myanimelist.net, there is this very nice and simple image slider and upon clicking it, it redirects you to the specific anime details page according to what you clicked. What is this widget called and where can I learn to create something like this?
A beginner programmer that wants to create a website but no idea how to start.
The page uses css mostly. if you are really starting and want to learn try with JQuery is a Java framework with "widgets" like you call them.
a duplicate of what you need is here: https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/
This is image slider or carousel slider. You can make it easy by using bootstrap 4 carousels. Bootstrap is very easy to learn and for image slider, you don't need to learn Jquery. Here is a link which will help you to make carousal Bootstrap Carousel
If you wanna use direct code then you can check this link Jassor Image slider
This is called a Carousel or Slider. You should be able to create this with just HTML and CSS and a tad bit of JavaScript. I first learnt building one by going through this link in W3C. When I got older and experienced I stopped building one from scratch for every project, instead started using Bootstrap Carousel. A good resource to learn this is from here.
I'm looking at this site: http://www.calgaryclimbing.com/rates/ . On their footer they have very clean looking icons that link to their social media pages. I want to do the same using the same icons they are using. But when I inspect the elements It shows that they use an i tag and that the class links to some css code that uses the content property. I want to use the image icon so my questions are how can I get the image? And why was it programmed this way? Why not just use an image that you could click on?
I didn't check the link you provided but it's most likely a custom font just like Font-Awesome which you can use to put many kind of icons in your Web Site/App.
Font-Awesome use the <i> tag as well just like you explained.
Why using Font-Awesome?
As they say:
Font Awesome gives you scalable vector icons that can instantly be
customized — size, color, drop shadow, and anything that can be done
with the power of CSS
Hi Experts
My question is :
how we can achieve UI as shown in above image using angular-material?
if it is not possible using angular-material then which framework I can use
The Tabs for FLight, Hotel, Buses, Holiday this kind of tab using icon and text with transparent background.
the search text boxes using autocomplete.
I am using angularJs and angular-material.
Any Help would be a great support.. Thanks
All the basic components you mentioned are available in angular material:
Auto-complete
Tabs
You have also a lot of icons But i suggest you though to use FontAwesome
However for other things you asked, you have to absolutely learn css since no any framework can visually fit to your design choices.
I've built a website using bootstrap, and I now want to use the Bootstrap Material Design theme for its sexy components. So I included the css and js in my <head>, which immediately changes a lot of things in my website, such as the background and the navbar.
Unfortunately I do not want to use the background or the navbar of the theme. Does anybody know how I can override or "disable" the theme's navbar and background?
All tips are welcome!
You can override it by going into your new theme. Find the background and navbar in the css file of your new theme and simply use "!important" to override this.
Example:
background: white !important;
find all unwished components, copy and paste them into your own css file, change the values and include it as latest into the header section. hope this helps
I have not found an existing datepicker on github or in the twitter bootstrap.
I have a modified version of the twitter bootstrap, with orange styled icons for buttons/themes.
When I attempt to use the datepicker from eyecon it remodels the icons as the color blue on my bootstrap website. I would like to set this datepicker as the same as my theme. But I'm not sure whether or not I should copy-paste from the eyecon version into my version?
Does someone know a better way on how I could restyle the datepicker from eyecon? for my theme? I'm not currently using any additional plugins.
Edit 4 september 2012
What I means in this question is something like using a plugin such as http://www.eyecon.ro/bootstrap-datepicker/ The themes I am working on is based on Orange themes.
The eyecon have a themes in Blue color. My means to get the same plugin fit according to my orange theme.
Datepicker from eyecon uses its own css file datepicker.css. You should change the colors in this css file to the colors you need.