I have downloaded font-icon from flaticon.com
to change font-icon color we can use css like this:
.flaticon-baby23:before {
content: "\e000";
color:red;
}
to change size we use this:
.flaticon-baby23:before {
content: "\e000";
font-size:15px;
}
Is ther any method to change shape of font-icon like given in the picture i found those from here is webiste
Those are various shape
how do i change icon shape???
my style
The way those icons are changing "shape" is that the border radius, background, and drop-shadow is being applied to them. The icon itself (the twitter bird) is not changing.
Depending on what you are trying to do, you might be able to do the same.
If you are trying to get the edges of the phone font icon to be rounded, that is not possible unless you find one that has that already. If, instead, you are trying to create a background for your icon similar to the twitter icons you showed, style the font icon with a border-radius, background-color and drop-shadow.
better download other font-icon packs or use background radious method
Related
Currently working on my portfolio. I used this template. I'm trying to make my profile image into a circle shape. I can't figure out where I would put borderRadius or border-radius. Here's what it currently looks like https://sarairamadanportfolio.netlify.app/
Here's the source code: https://github.com/sramadan7/professionalportfolio/tree/gh-pages/src
I tried adding borderRadius and border-radius under the img tag on the index.html page but no change. Then, I tried to add both of these to _about.scss and still no change. Not sure where else to put it so that the image is a circle shape instead of rectangle.
Your link doesn't work but when you want to add style in react jsx elements, you need to use the camelCase style for it: <div style={{borderRadius: '50%'}}>. When you want to add style in css, you would space the word out using -: border-radius: 50%;
I'm trying to make a dark theme via css for Tiktok's Chrome site and I'm having some trouble making the like button visable on the black background.
i tried using Filter:invert(1); and that worked but when you like the comment the red color is now teal.
tiktok doesn't use different divs for the different imgs so when i filter the black heart it filters the red one too. all tiktok does is switch the image links in the src. i want to specify the black img link in css to isolate it so i can filter that one and that one only.
This is the HTML of the red like button.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg" class="jsx-1998704864 icon">
This is the one i want to isolate in css.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg" class="jsx-1998704864 icon">
This is what i have in my css
.like-container.jsx-1998704864 .icon.jsx-1998704864{
filter:invert(1);
}
Since you're not able to use JavaScript, your best option is to use attribute selectors. Please note that the source is probably very likely to change, since those classnames for example seem to be auto generated by some compiler. Same goes for the image URL.
To select the unlike button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg"] {
/* your unlike button style */
}
For the like button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg"] {
/* your unlike button style */
}
EDIT (after 15 mins):
If you want to select any image tag which contains the word "unlike" you can also use this:
img[src*="unlike"] {
/* your unlike button style */
}
I am new to svg icons and I just need to change the color of this icon on hover.
This is what I have so far: jsfiddle.net
.search-social :hover .search-icon {
fill: #72dcff;
}
It's just working from the fiddle as you can see since I applied.search-social on both of them.
But is this solution clean or do you suggest a better solution?
https://jsfiddle.net/e1491y39/4/
I think it's because you've got strokes and fills and separate pieces. So if you make it a single path, you could just use that single path. Otherwise, you could use a hover on the SVG itself. (See jsFiddle.)
.
I don't have much experience in css. But I want to design a diagram in html. I need to design slimmer arrow (link) using css.
I thought of using image but I need arrows in different colors. Is there any possibilities by adding transparent arrow image and adding colour dynamically if yes provide sample code or any other suggestions also welcome. Kindly suggest me.
Try to use Font awsome LINK
HTML:
<i class="fa fa-arrow-right"></i> fa-arrow-right
Yes, there are several ways of doing this.
1. With an image
First of all, in order to do what you've suggested, you can indeed use an image - but instead of coloring the arrow, you would be coloring behind a cut-out of an arrow.
To do this, create the image of your arrow in a file format that supports transparency (PNG would be my recommendation). For example, a white square with the shape of an arrow 'cut out' of it, so that the arrow is entirely transparent (surrounded by white). It could look something like this in Photoshop;
Now, with your transparent PNG, insert the image into your code and surround it with a container - such as a DIV. You can then style the DIV (not the arrow), but the arrow will appear to change color.
Your HTML and CSS might look something like this;
<div style="background-color: red; display: inline-block; font-size: 0;">
<img src="arrow.png";>
</div>
background-color: ---; will determine the color of your arrow (you can also use hex values for better specificity - for example background-color: #CB0022;).
display: inline-block; is one possible way to keep your wrapping DIV under control. Without it, your background color will stretch to the full width of its parent container (possibly the entire page) - breaking the effect you're trying to create. Alternatively, you could also float the DIV, but this will complicate matters if you want the arrow to appear in the middle of text.
font-size: 0; is one possible solution to the common issue of extra space appearing around the image (and again, revealing unwanted background color where it shouldn't be).
The main downsides of using this technique are that manipulating images may be complicated depending on your precise layout/implementation. Also, the above example is suitable only for a page that has a white background. If you have a variety of background colors (or a more detailed/complex background, such as a photograph or pattern), this may be a very difficult solution to work with, because your arrow's 'box' is unlikely to match what's behind it.
2. With Unicode / HTML characters
Rather than using an image, you can use unicode characters to write out arrows as actual text. There are lots of these codes - and an example of them can be found here: HTML Arrow Codes
For example, your code might look like this;
<p style="font-size: 2em;">Why don't you look over there? → →
... or down there? ↙</p>
This would look something like this in a browser;
And then you could further style the arrows with <span> tags in order to change their size or color independently, like this;
<p style="font-size: 1.5em;">Why don't you look over there?
<span style="font-size: 4em; color: blue;">→</span>
<span style="font-size: 2.5em; color: darkgreen;">→</span>
... or down there? <span style="font-weight: bold; color: #CC0000;">↙</span></p>
Which would look something like this;
The main advantages here are that you will have no issues with matching against background color, you can more easily change the appearance of the arrow with code (CSS).
The downside is that using obscure characters and fonts can, in some cases, display inconsistently from device to device for a multitude of reasons I shan't burden you with right now. Suffice it to say, if you prefer this solution, be sure to test your results on as many different machines as you feel is appropriate.
Hope that's of use.
I'm considering starting to use this technic of icons as fonts, as it seems pretty awesome. But I can't seem to figure out how make it change colors on hover of the link. Here is a jsfiddle for you to play with:
http://jsfiddle.net/eNhUf/17/
As you will see, when you hover a text like "caution", the text goes to BLUE, and I would also like the icon/font to go to blue as well.
Does anybody know how to do this?
Thanks.
.caution.icon:hover:before{content:"\0021";color:green }
This will make caution icon go green when you hover the link, I'm sure you can customize the idea as you like! http://jsfiddle.net/agentmilindu/eNhUf/24/
Font icon libraries usually use pre-generated content to inject the icon into the element. This means that you need to target that area and set the color.
<p class="icon caution email">Email</p>
<style type="text/css">
.icon.caution, .icon.caution:before { color:blue; }
</style>
Try this:
.icon:hover, .icon:hover:before { color: blue; }