React Icons Sizing [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last month.
Improve this question
So I imported some React icons and I don't know how to make them bigger since they are so small, anyone know how I can make their size bigger?
I tried with giving them a class and trying to adjust the height and width but it did not work.

If you're using the react-icons package (https://npm.im/react-icons), you can pass a size prop to the component:
import { FaBeer } from "react-icons/fa";
function Question() {
return (
<h3>
{" "}
Lets go for a <FaBeer size={50} />?{" "}
</h3>
);
}

Related

Hi, how can I move the logo from the top left corner to the center when I start scrolling. Thanks [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to know how to move the logo from the top left corner to the center when I start scrolling. Thanks!
Have a onscroll event on the html element you want to scroll;
Inside onscroll event handling change the style of logo element to align:center;
something like below(psuedo code):
<div onscroll="handleMyScrolling(event)">
<logo id="logo"></logo>
</div>
<script>
function handleMyScrolling(event){
document.getElementById('logo').style= // your style to bring the element to
center.
}
</script>

Fit realtime text inside container [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am using Angular 2 with (for now) 2 way data binding and I need to diplay a H1 over the full width of the page. So it will become smaller the more text there will be. And bigger if the amount of text shrinks.
I saw http://fittextjs.com but that resizes it only on the page init.
I need it in realtime.
Thanks!
I am using this
https://github.com/jquery-textfill/jquery-textfill
And you can call them when you want (after text render), simply, calling
$('#my-element').textfill({
maxFontPixels: 36
});
And it's very customizable.
Happy coding!
Edit:
I understand the problem now replace px with whatever unit of length
<h1 ng-style="{'max-width':'100%', 'font-size': inputlength + 'px'}">{{input}}</h1>
You may have to tweak it to however you want to get it to work
essentially having to do the logic like font-size:calc(100% + 2vw)
or work it out in your controller
$scope.input = "ssssssss";
$scope.inputlength = 10;
$scope.$watch('input', function(){
$scope.inputlength = window.innerWidth / $scope.input.length;
});

Replace all #333 colors with javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
My question is how do I replace a certain color in javascript? I have a few SVG fills which I need to change in color but how exactly do I get all #333 colors that exist in my document?
I would try something with jquery (going to be a good bit simpler than anything with pure js)
$(this).html().replace("#333","#f2f2f2")
Here is something you could do. This example would return all elements with that color.
var results = $('*').filter(function() {
return $(this).css('color') == 'rgb(255, 0, 0)';
})
http://jsfiddle.net/g5yp1g7y/
You will notice I didn't use hex. The problem with selecting by hex is most browsers will convert the color style to rgb when you call them via JS.

jQuery, resize then fadeIn [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I search around but don't know how to do this one... I receive through $.ajax() data then render through jQuery template. I want:
create template object (this one done)
set it hide() (this one done)
insert it to page with height 1 or 0
then make some effect that will re-size (by height) this inserted div
make fadeIn on this template
So base thing that i need to re-size (slowly) page, add there hidden div (rendered by template) and then make fadeIn function on it. The same thing on fadeOut.
You'll need to use callback functions like this -
$( "#something" ).animate({
height: "100",
width : "100"
}, 5000, function() {
$('#someOtherThing').fadeIn();
});

Set width property on div? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I would have the same width DivTest and IdOtherDIV.
I'm trying set property like this:
DivTest {
background: #007C52;
width: document.getElementById ("IdOtherDIV").scrollWidth + "px.\n";
}
Is any way to achieve it (IdOtherDIV is dynamically created and width can change on every page refresh)?
You can use jquery
width=$("IdOtherDiv").css("width");
$("#DivTest").css({"background":"007C52","width":width})

Categories

Resources