i'm with some doubts here, i've trying to find a tutorial or example on 'how to' but i can't find any.
I have a good knowledge in css (not professional, but i understand) and when working with some templates or tutorials i've seen some flat icons on the website, when i go to the css class, what i found is something like these: "example:before { content: "\e00a"; }"
I'd like to know how is it done? How can i change it to another icon? Or even, how can i create another 'flat icon' based on the same process?
If anyone can help me, please.
Thanks
You can use the content property for icons for example. \e00a for example refers to this character:
It can be used as the bullet point for list items:
li:before {
content:'\e00a'
padding-right:12px;
}
Some fonts come with characters like the ones found here. You can use those characters like \f042 for example to display the screen contrast symbol. however you will need to download the font first to make use of it. Read more about #font-face here
Use Predefined CSS files like "fontawsome" or "glyphicons" (Google It). And then use their css class like <i class="fa fa-facebook"></i> this will show facebook icon.
You are looking for font icons. This gives you scalable vector icons that can be customized with CSS on size, color, drop-shadow, etc. -- Font Awesome
Here is a great example.
http://fortawesome.github.io/Font-Awesome/icons/
Related
Often we can see CSS coding practices that use pseudo class such as before or after along with content inside it to eventually make it become an icon. such as
.email:before {content: '\e600'; font-family: special-font}
I think this question could be more relevant to how font-family works to render icon. Any idea on how does this works are welcome or point me some directions that I can do more research.
Maybe this will help?
Icon Fonts: How do they work?
Basically, the content code maps to a point in the font. The font is actually an icon. That css is a way to place the icon in the content without actually specifying it in the html content.
Full explanation here: https://webstandardssherpa.com/reviews/responsive-webfont-icons/?utm_source=buffer&utm_campaign=Buffer&utm_content=buffereac5b&utm_medium=google
I am trying to use these icons along with openweathermap and i successfully managed to, although i can not change their size! They way they are used is like font-awesome ones : <i class="wi wi-omw-100"></i>
What attribute do i change to make it larger ? (font awesome ones don't work i tried!) and i couldn't find something specific in the documentation.
starter level CSS user here.
( the code: http://codepen.io/dioannou/pen/grveyR )
I know this is a month old but I thought I'd tell you how I did it:
After looking around a bit, I found this solution to target all elements that have the tag <i> tag.
wildcard * in CSS for classes
This may not be the optimal solution and you are right there is very limited documentation.
In the end, I just did this in an overriding css file:
i[class^="wi-"], i[class*=" wi-"] {
font-size: 200px;
}
This is probably isn't the optimal solution and I will post back here if I find a better way. I haven't had a chance to look at the original CSS file for a specific sizing class but this did the trick for me where I just needed to use it in one page and move on.
Hope this helps somebody.
Firstly let me admit that I am a beginner in CSS. I recently came across a nice website: http://www.sitepoint.com/better-solution-managing-z-index-sass/ and was curious to know how the "3" is displayed alongside "CSS". When I tried to check through the firebug, I saw a class name ".category-css .icon-category:before" which contains content property which has some strange content.
Could you please let me know where is content property pointing to. I know this might be the silliest question, but I am clueless.
On the <i class="icon-category> they are setting a font-family: 'sitepoint', Sans-Serif;, on the :before element the content element is using a Unicode, which will relate to a character from their custom font 'sitepoint'.
For example, Font Awesome uses unicodes for it's characters, as you can see each character has a unique code next to it.
I am trying to modify a template and am unable to locate the images on the very bottom right of the page (social media icons): http://flockwithme.com/
I would like to replace them with different icons, but none of the files (css, js, etc.) contain the location of the files.
If anyone could help me modify/replace them, I'd appreciate it very much. Thanks
First off, the icons are not images but are actually part of a web font defined as "font-family: 'Simple-Line-Icons';" in the application's css.
Which I assume is this one - http://graphicburger.com/simple-line-icons-webfont/ ?
Second, you can easily inspect an element's html/css code by:
Viewing the website in Chrome
Right clicking the element (in this case, the icon)
And choosing "Inspect Element"
In this page they use fonts for that icons. You should see the fonts for that.
thats not image. it set in before of every span
like this
.icon-social-twitter:before {
content: "\e009";
}
they using font-family: 'Simple-Line-Icons';
Site:
oldfashionedgoods.com
I'm using SquareSpace to build a splash page for my site, and while I've been able to figure everything out, this last thing plaques me.
I'm trying to have it so when you type your email in to the submit field, it uses the font Cutive Mono, just like I'm using for the text above the box.
So far I have this:
input[type=text] {
color: #cc5723;
font-family: cutive mono;}
While I do not want it to be that amber color, I was messing with the color to make sure I was working with the correct item. The text changes color as I type, but the font will not change. What am I missing here?
I'm a complete newb so sorry if this is a dumb question! I already looked everywhere online, but nothing seems to work. Thanks!
I suspect it is being overridden by another CSS style. Try using:
input[type=text] {
color: #cc5723;
font-family: cutive mono !important;}
If that works then it is being overridden somewhere in your CSS.
NOTE:!important should only be used to test. It is not a solution.
I have tried a basic example here: http://jsfiddle.net/n4S3s/ which seems to work fine.
Your other styles have priority over this. Use
font-family: cutive mono !important;
to test.
Yep. important! works. I just wasn't sure of it, but here is the
DEMO
The other answers are correct; other styles in your CSS are overriding this one. I'm not sure I like using !important to force the style; I think of that as a last resort. But it's good for testing.
But more importantly, would you like to know how you could figure this out for yourself? Use the Developer Tools in Chrome (or any browser). Simply right-click the input element and select "Inspect Element". Then look at the Styles panel in the bottom right and you can see what styles are in effect for this element, and which CSS rules they came from. You can also temporarily toggle off any styles, edit the styles, etc.
Stack Overflow is a fast way to get questions answered, but the Developer Tools are much faster! :-)