has anyone made a Fauxgirl flag one?
im a bit dumb af but how do you make them clickable? like from the flag itself and leading back to this site
i wanted to share the bellusromantic flag since i dont see it
<div class="rounded d-inline-block" style="background-image:linear-gradient(#9e5aae,#9e5aae 20%,#d68ce5 20%,#d68ce5 40%,#fff 40%,#fff 60%,#f7a9da 60%,#f7a9da 80%,#e784c1 80%);line-height:20px;width:26px;"> </div>
I feel like the fix is super obvious but I can't seem to figure it out. Does anyone know how to get the flags to sit next to my icon like they're supposed to?
div class="rounded d-inline-block" style="background-image:linear-gradient(#2d2d2d,#2d2d2d 14.3%,#9c58cf 14.3%,#9c58cf 28.6%,#9ad9eb 28.6%,#9ad9eb 42.9%,#fff 42.9%,#fff 57.2%,#9ad9eb 57.2%,#9ad9eb 71.5%,#9c58cf 71.5%,#9c58cf 85.8%,#2d2d2d 85.8%);line-height:20px;width:26px;"> </div
(add the <> at the ends)
Neoboy if anyones looking!
hello comment section of this post! If someone could make an autosexual flag or an OCD flag that would be wonderful :)
Hello! Could you possibly add disability flags too? (Specifically autism, BPD, ADHD, etc.) It's ok if not, but am just curious
https://toyhou.se/21355465.my-tiny-pride-flag you might like these!! there’s a lot of disability pride ones
Could anybody help me figure out way to make the Asexual Panromantic Combo flag? I tried to modify the Queerplatonic flag but the code wouldn't cooperate
This user is not visible to guests.
Okay so... not sure what I'm doing wrong. I got it to work on circlejourney's tester site but on Toyhouse itself, it breaks completely here's a screenshot
could someone add a recipromantic flag
*wait imma try to reverse engineer this bc why not
<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff218c,#ff218c 20%,#efb2db 20%,#efb2db 40%,#adf5b1 40%,#adf5b1 60%,#fff 60%,#fff 80%,#000 80%);line-height:20px;width:26px;"> </div>
I made a US flag and figured I'd share it even though it's not a pride flag :P
"<div class="rounded d-inline-block" style="background-image:linear-gradient(#b90b0b,#b90b0b 14.3%,#fff 14.3%,#fff 28.6%,#b90b0b 28.6%,#b90b0b 42.9%,#fff 42.9%,#fff 57.2%,#b90b0b 57.2%,#b90b0b 71.5%,#fff 71.5%,#fff 85.8%,#b90b0b 85.8%);line-height:15px;width:30px;"><div style="background:url(https://i.imgur.com/214uRc0.png) no-repeat 1% 1%;background-size:40%;height:20px;width:35px;"> </div></div>"
Sorry for the super late reply, I got busy with school and haven't been online at all! This person https://toyhou.se/22445130.html-flags-of-the-world-wip made one I think!
someone else has been making html flags of the world actually! https://toyhou.se/22445130.html-flags-of-the-world-wip
I made greysexual! Idk if there is, but anyways
Heres code⤵️
<div class="rounded d-inline-block" style="background-image:linear-gradient(#5c2c54,#5c2c54 20%,#7c7484 20%,#7c7484 40%,#fff 40%,#fff 60%,#7c7484 60%,#7c7484 80%,#5c2c54 80%);height:20px;width:26px;"> </div>
And Here it is⤵️
This user is not visible to guests.
You should be able to shift the white to the left using margin-right
"<div class="rounded d-inline-block" style="background-image:linear-gradient(#019fe3,#019fe3 33.3%,#e50051 33.3%,#e50051 66.6%,#340c46 66.6%);line-height:20px;width:26px;"><div class="rounded d-inline-block" style="background:#fff;clip-path:polygon(0 0,38% 0,100% 33.5%,0% 100%);width:45%; margin-right:13px "><div style="background:url(https://images2.imgbox.com/bd/b7/aKB53V1y_o.png) no-repeat center 25%;background-size:60%;"> </div></div></div> "
you might have to adjust the pixels to fit yours, but it should work otherwise~
This user is not visible to guests.
I made an objectum one for myself so I might as well share it
<div class="rounded d-inline-block" style="background-image:linear-gradient(90deg,#6a9fb6,#6a9fb6 20%,#d9d9d9 20%,#d9d9d9 40%,#fff 40%,#fff 60%,#fdff9b 60%,#fdff9b 80%,#b499c2 66.6%);line-height:20px;width:26px;"><div style="background:url(https://file.garden/ZcPXKEClQE8Z0nqs/Objectum.png) no-repeat center;background-size:50%;"> </div></div>
six months late to your request, but i just whipped up the voidpunk flag for my own personal use & figured i'd respond to your message in case you still wanted it—
<div class="rounded d-inline-block" style="background-image:linear-gradient(#372E49,#372E49 25%,#9E74B6 25%,#9E74B6 45%,#FFFFFF 45%,#FFFFFF 55%,#51AC56 55%,#51AC56 75%,#20452C 80%);line-height:20px;width:26px;"><div style="background:url(https://file.garden/Z3onGana_FBI9M8G/Toyhou.se%20Nonsense%3F/Tabs'%20profile/voidpunk%20flag%20symbol.png) no-repeat center;background-size:45%;"> </div></div>
o/ made an Aroacespec flag with alt text :)
<div class="rounded d-inline-block" style="background-image:linear-gradient(#79c49b,#79c49b 25%,#eafdfb 25%,#eafdfb 50%,#635a9f 50%,#635a9f 75%,#11263e 75%);line-height:20px;width:26px;" title="Aroacespec"> </div>
Has anyone made a xumgender/pendogender flag yet? If someone can I'd seriously appreciate it!
hi hi! o/ made the 3rd version, but i thiiiink i could try my hand at figuring out either of the other two if prefered :]
<div class="rounded d-inline-block" style="background-image:linear-gradient(#7bf9ad,#7bf9ad 14.3%,#0cf397 14.3%,#0cf397 28.6%,#0f9166 28.6%,#0f9166 42.9%,#ffffff 42.9%,#ffffff 57.2%,#0f9166 57.2%,#0f9166 71.5%,#0cf397 71.5%,#0cf397 85.8%,#7bf9ad 85.8%);line-height:20px;width:26px;"> </div>
I made some! Here's the most common one:
<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff85c0,#ff85c0 33.3%,#fff098 33.3%,#fff098 66.6%,#99dbff 66.6%);line-height:20px;width:26px;"><div style="background:url(https://files.catbox.moe/qufhp9.png) no-repeat center;background-size:60%;"> </div></div>
And here's some other panromantic flags:
<div class="rounded d-inline-block" style="background-image:linear-gradient(#ff218c,#ff218c 33.3%,#fed800 33.3%,#fed800 66.6%,#21b1ff 66.6%);line-height:20px;width:26px;"><div style="background:url(https://files.catbox.moe/rx11j7.png) no-repeat center;background-size:60%;"> </div></div>
<div class="rounded d-inline-block" style="background-image:linear-gradient(#0BA9F4,#0BA9F4 25%,#86CE00 25%,#86CE00 50%,#FF9826 50%,#FF9826 75%,#FF2662 75%);line-height:20px;width:26px;"> </div>
<div class="rounded d-inline-block" style="background-image:linear-gradient(#D53973,#D53973 33.3%,#FF9776 33.3%,#FF9776 66.6%,#A962B2 66.6%);line-height:20px;width:26px;"><div class="d-inline-block" style="background-image:linear-gradient(#ff218c,#ff218c 33.3%,#fed800 33.3%,#fed800 66.6%,#21b1ff 66.6%);height:100%;clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%);width:100%;"> </div></div>
I made Rosboy and Azurgirl if its helpful to anyone ૮ • ﻌ - ა
<div class="rounded d-inline-block" style="background-image:linear-gradient(#b63dc6,#b63dc6 20%,#f736aa 20%,#f736aa 40%,#ffb182 40%,#ffb182 60%,#cdf5ff 60%,#cdf5ff 80%,#74dfff 80%);line-height:20px;width:26px;"> </div>
<div class="rounded d-inline-block" style="background-image:linear-gradient(#7c34f5,#7c34f5 20%,#6190f9 20%,#6190f9 40%,#72e4c7 40%,#72e4c7 60%,#ffdbea 60%,#ffdbea 80%,#fe8dbf 80%);line-height:20px;width:26px;"> </div>
2024 update: many flags added/updated, see the GitHub for their codes.
The Code tab became outdated when TH started escaping the unescaped code every time code was edited which made every additional edit tedious (which made the main page and code tab become outdated compared to the GitHub and many people were/are unaware of the discrepancy). The code tab is still outdated as of writing this (and I'm unsure of when/if I'll update it to be current), so please refer to the GitHub page for current codes (when viewing the code on GitHub, triple click the line of code to select your desired flag instead of manually highlighting with your cursor).
slender man
@VynxCodes
@VynxCodes
Collect my pride flags
"Flags with triangles break when I paste them into [specific code/layout]"
When the flags with triangles (or other clip-path polygons) are changed from <div><span>class="rounded d-inline-block" to class="rounded d-block" to fix this.
(A parent div aligns text right and all flag divs are changed to span for the purpose of this demonstration)
class="rounded d-inline-block"
class="rounded d-block"
<span <span class="d-block"How do i put multiple flags in the same line? probably a silly thing to ask but im VERY new to coding with html sobsob
put them in the same first div!
<div class="text-center"><div class="rounded d-inline-block" style="background-image:linear-gradient(#5ac7ed,#5ac7ed 20%,#efa4b1 20%,#efa4b1 40%,#fff 40%,#fff 60%,#efa4b1 60%,#efa4b1 80%,#5ac7ed 80%);line-height:20px;width:26px;"> </div><div class="rounded d-inline-block" style="background-image:linear-gradient(#ff8bbf,#ff8bbf 14.3%,#cdf5ff 14.3%,#cdf5ff 28.6%,#9aedff 28.6%,#9aedff 42.9%,#76e0ff 42.9%,#76e0ff 57.2%,#9aedff 57.2%,#9aedff 71.5%,#cdf5ff 71.5%,#cdf5ff 85.8%,#ff8bbf 85.8%);line-height:20px;width:26px;"> </div><div class="rounded d-inline-block" style="background-image:linear-gradient(#d70170,#d70170 40%,#734f94 40%,#734f94 60%,#0039a7 60%);line-height:20px;width:26px;"> </div><div class="rounded d-inline-block" style="background-image:linear-gradient(#59fd44,#59fd44 20%,#fff 20%,#fff 40%,#fffd58 40%,#fffd58 60%,#ffcc5b 60%,#ffcc5b 80%,#6b90fe 80%);line-height:20px;width:26px;"><div style="background:url(https://images2.imgbox.com/d6/e0/v7kilFht_o.png) no-repeat center;background-size:60%;"> </div></div></div>
Upd8 i made one lol
<span data-toggle="tooltip" title="Pupgender" class="rounded d-inline-block" style="background-image:linear-gradient(#55FE3D,#55FE3D 20%,#ffffff 20%,#ffffff 40%,#FFFC52 40%,#FFFC52 60%,#FFC653 60%,#FFC653 80%,#6B8FFD 80%);line-height:20px;width:26px;"><div style="background:url(https://i.imgur.com/VdkHZuT.png) no-repeat center;background-size:50%;"> </div
Could anyone make an androromantic(comes from androsexual) flag? Also anyone know how to fix the demisexual flag? My triangle keeps moving from the left to the right.
If someone needs it I just made a HOMOFLEXIBLE flag
To do it: - find the heteroflexible flag (https://pastebin.com/D2UvwTT3) - copy the code - switch the whole 1st part about colors in the ( # # #) with the 2nd part
Heya! I would like a small help! :D
Anyone know how to make a flag to be in the center of a line, without any text in the sides? 👀
Im having issues with the demiromantic flag, the traingle is showing on the other side, but i can't change it to left like the other comment said cause that'll break the code
i just looked, they are SO many flags its ridiculous, but i found this two:
https://i.redd.it/6tkzs2i4ar851.png
https://64.media.tumblr.com/98273dc21f03fde5d459e00ffbd59033/tumblr_inline_p3l7agF8Yy1uuabn3_500.png
The first one it's just otherkin, the second its otherkin+therian and the third its the therian one
although from what i'm seeing, it's more the symbol than the flag
i found myself needing some flags so i went ahead and made a pastebin containing the ones ive made
i will add more as i make them, but heres a list of what ive made! (if you have a flag you want added, i can most likely make it for you)
caedromantic
caedsexual
heteroflexible
hypersexual
female
male
otherkin
otherkin+therian
therian
This user is not visible to guests.
i dont know how to fix this problem, but I do know what causes it, if that helps you find a solution
basically, since the flags are aligned right in the code, the polygons will also be aligned right
same thing happens if you align things in the center
Hey can you please add the Caedromantic/Caedsexual flags if it's possible? Thank you! ^^
ello, hopefully these are the right flags
< div class="rounded d-inline-block" style="background-image:linear-gradient(#4E9026,#4E9026 20%,#5DA631 20%,#5DA631 40%,#80CB4A 40%,#80CB4A 60%,#AAF76B 60%,#AAF76B 80%,#000 80%);line-height:20px;width:26px;">< div class="d-inline-block" style="background:#808080;clip-path:polygon(40% 40%,40% 60%,40% 40%,60% 40%,60% 60%,80% 60%,80% 100%,80% 100%,80% 100%,20% 100%,20% 60%,20% 60%,20% 60%,40% 60%,40% 60%);width:100%;">< div class="d-inline-block" style="background:#fff;clip-path:polygon(40% 100%,40% 40%,60% 40%,60% 100%);width:100%;"> < /div>< /div>< /div>
< div class="rounded d-inline-block" style="background-image:linear-gradient(#4B2592,#4B2592 20%,#5E31A6 20%,#5E31A6 40%,#7449CC 40%,#7449CC 60%,#956CF8 60%,#956CF8 80%,#000 80%);line-height:20px;width:26px;">< div class="d-inline-block" style="background:#808080;clip-path:polygon(40% 40%,40% 60%,40% 40%,60% 40%,60% 60%,80% 60%,80% 100%,80% 100%,80% 100%,20% 100%,20% 60%,20% 60%,20% 60%,40% 60%,40% 60%);width:100%;">< div class="d-inline-block" style="background:#fff;clip-path:polygon(40% 100%,40% 40%,60% 40%,60% 100%);width:100%;"> < /div>< /div>< /div>
unfortunately i can't make the heteroflexromantic flag but here's the heteroflexible one
< div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 16.7%,#303030 16.7%,#303030 33.4%,#666666 33.3%,#666666 50.1%,#9A9A9A 50.1%,#9A9A9A 66.8%,#BCBCBC 66.8%,#BCBCBC 83.5%,#fff 83.5%);line-height:20px;width:26px;">< div class="d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);clip-path:polygon(40% 0%,40% 0%,40% 0%,60% 0%,60% 100%,60% 100%,60% 100%,40% 100%);width:100%;"> < /div>< /div>
This user is not visible to guests.
This user is not visible to guests.
This user is not visible to guests.
hopefully this is the right flag but here
< div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 16.7%,#EF2047 16.7%,#EF2047 33.4%,#F9B8D2 33.3%,#F9B8D2 50.1%,#EB6297 50.1%,#EB6297 66.8%,#EE376A 66.8%,#EE376A 83.5%,#000 83.5%);line-height:20px;width:26px;"> < /div>
I’m having trouble centering the flag! I’d like the add a flag in between two parts of a profile as a divider, but I don’t know how to enclose the text. Could you show an example or explain it if possible? Thanks in advance
Let me know if this works & is the right flag
Pupgender
<div class="rounded d-inline-block" style="background-image:linear-gradient(#55FF3E,#55FF3E 20%,#FFFFFF 20%,#FFFFFF 40%,#FFFD53 40%,#FFFD53 60%,#FFC754 60%,#FFC754 80%,#6B90FE 80%);line-height:20px;width:26px;"><div style="background:url(https://i.imgur.com/vV3GCW2.png) no-repeat center;background-size:68%;"> </div></div>
Catgender
<div class="rounded d-inline-block" style="background-image:linear-gradient(#FF76AE,#FF76AE 20%,#FFB0D0 20%,#FFB0D0 40%,#C876FF 40%,#C876FF 60%,#B0D5FF 60%,#B0D5FF 80%,#77BCFF 80%);line-height:20px;width:26px;"><div style="background:url(https://i.imgur.com/3orrfUa.png) no-repeat center;background-size:68%;"> </div></div>
Heya I'm not great at HTML and I'm not sure how well this would even translate but if anyone could help me out in making the queer chevron flag that'd be great thanks ^^ (I just personally prefer it to the 9 stripe queer flag)
edit: nvm I got it. It might not be perfect but good enough for me 👍👍
<div class="rounded d-inline-block" style="background:#FBF5EC;line-height:20px;width:26px;"><div class="rounded d-inline-block" style="background:#BC80C7;clip-path:polygon(0 15%, 50% 40%, 100% 15%, 100% 65%, 50% 90%, 0 65%);width:100%;" ><div class="rounded d-inline-block" style="background:#FBF5EC;clip-path:polygon(0 35%, 50% 60%, 100% 35%, 100% 65%, 50% 90%, 0 65%);width:100%;" ><div class="rounded d-inline-block" style="background:#684169;clip-path:polygon(0 45%, 50% 70%, 100% 45%, 100% 65%, 50% 90%, 0 65%);width:100%;" > </div></div></div></div>heres androsexual ^^ (make sure when you copy and paste, delete the space between the < and div. its there for ppl to copy and paste the code.)
< div data-toggle="tooltip" title="Androsexual" class="rounded d-inline-block" style="cursor:help; background-image:linear-gradient(#01ccff,#01ccff 33.3%,#603524 33.3%,#603524 66.6%,#b799de 66.6%);line-height:20px;width:26px;">
This user is not visible to guests.
Hello 7 month old comment
<span data-toggle="tooltip" title="Autistic" class="rounded d-inline-block" style="background-image:linear-gradient(#E63144,#E63144 14.3%,#F78449 14.3%,#F78449 28.6%,#FCCA5A 28.6%,#FCCA5A 42.9%,#FCCA5A 42.9%,#FCCA5A 57.2%,#FCCA5A 57.2%,#FCCA5A 71.5%,#9AD772 71.5%,#9AD772 85.8%,#22AF76 85.8%);line-height:20px;width:26px;" ><span class="rounded d-inline-block" style="background:url(https://file.garden/ZjKV-NClQA2p3X3U/enf.png) no-repeat center;background-size:80%; width: 100%;"> </span></span>
I was bored...
Cupioromantic
<div class="rounded d-inline-block" style="background-image:linear-gradient(#fca9a3,#fca9a3 20%,#fdc5c0 20%,#fdc5c0 40%,#fff 40%,#fff 60%,#c8bfe6 60%,#c8bfe6 80%,#a0a0a0 80%);line-height:20px;width:26px;"> </div>
Cupiosexual
<div class="rounded d-inline-block" style="background-image:linear-gradient(#a0a09e,#a0a09e 25%,#c8bfe6 25%,#c8bfe6 50%,#fff 50%,#fff 75%,#ffb3da 75%);line-height:20px;width:26px;"> </div>
Heya hi! I seem to be having a weird issue where at first the flags are inline with the text
But each flag I add seems to float higher?
Could someone help out?
handful of flags for people who want them:
- bigender, straight gay (florihet), transhet (trans straight), straight
- 9 stripe gilbert baker pride flag, 6 stripe ally flag, 9 stripe ally flag
also accepting requests for these since i think OP doesn't check this account much
<!-- BIGENDER -->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#C479A0,#C479A0 14.3%,#ECA6CB 14.3%,#ECA6CB 28.6%,#D5C7E8 28.6%,#D5C7E8 42.9%,#fff 42.9%,#fff 57.2%,#D5C7E8 57.2%,#D5C7E8 71.5%,#9AC7E8 71.5%,#9AC7E8 85.8%,#6C83CF 85.8%);line-height:20px;width:26px;"> </div>
<!-- STRAIGHT GAY/FLORIHET -->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#6FC29F,#6FC29F 16.7%,#fff 16.7%,#fff 33.4%,#5D448F 33.3%,#5D448F 50.1%,#fff 50.1%,#fff 66.8%,#6280B7 66.8%,#6280B7 83.5%,#fff 83.5%);line-height:20px;width:26px;"> </div>
<!-- TRANSHET/STRAIGHT TRANS -->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#BF818D,#BF818D 20%,#ECB8C2 20%,#ECB8C2 40%,#6C6469 40%,#6C6469 60%,#91B6C5 60%,#91B6C5 80%,#4A6671 80%);height:20px;width:26px;"> </div>
<!-- STRAIGHT -->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 16.7%,#fff 16.7%,#fff 33.4%,#000 33.3%,#000 50.1%,#fff 50.1%,#fff 66.8%,#000 66.8%,#000 83.5%,#fff 83.5%);line-height:20px;width:26px;"> </div>
<!-- 9 STRIPE PRIDE FLAG -->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#CE66FF,#CE66FF 11.11%,#FF6599 11.11%,#FF6599 22.22%,#FF0000 22.22%,#FF0000 33.33%,#FF9900 33.33%,#FF9900 44.44%,#FFFF00 44.44%,#FFFF00 55.55%,#009A00 55.5%,#009A00 66.6%,#0099CC 66.6%,#0099CC 77.7%,#340099 77.7%,#340099 88.8%,#990099 88.8%,#990099);line-height:20px;width:26px;"> </div>
<!-- STRAIGHT ALLY -->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 16.7%,#fff 16.7%,#fff 33.4%,#000 33.3%,#000 50.1%,#fff 50.1%,#fff 66.8%,#000 66.8%,#000 83.5%,#fff 83.5%);line-height:20px;width:26px;"><div class="rounded" style="clip-path: polygon(48.8% 0%, 100.5% 100.5%, 66% 100.5%, 50% 66.8%, 33% 100.5%, 0% 100.5%);;background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);"> </div></div>
<!-- 9 STRIPE STRAIGHT ALLY -->
<div class="rounded d-inline-block" style="background-image:linear-gradient(#000,#000 11.11%,#fff 11.11%,#fff 22.22%,#000 22.22%,#000 33.33%,#fff 33.33%,#fff 44.44%,#000 44.44%,#000 55.55%,#fff 55.5%,#fff 66.6%,#000 66.6%,#000 77.7%,#fff 77.7%,#fff 88.8%,#000 88.8%,#000);line-height:20px;width:26px;"><div class="rounded" style="clip-path: polygon(48.8% 0%, 100.5% 100.5%, 66% 100.5%, 50% 66.8%, 33% 100.5%, 0% 100.5%);;background-image:linear-gradient(#CE66FF,#CE66FF 11.11%,#FF6599 11.11%,#FF6599 22.22%,#FF0000 22.22%,#FF0000 33.33%,#FF9900 33.33%,#FF9900 44.44%,#FFFF00 44.44%,#FFFF00 55.55%,#009A00 55.5%,#009A00 66.6%,#0099CC 66.6%,#0099CC 77.7%,#340099 77.7%,#340099 88.8%,#990099 88.8%,#990099);"> </div></div>
Hiya! Do you think you can add Omnigender?
Omnigender | Mogai Genders Wiki | Fandom
Could you add autigender and gendervague flags? Thanks so much for these great codes!
https://www.lgbtqia.wiki/wiki/Autigender https://nonbinary.wiki/wiki/File:Gendervague.png
would you be able to add the nebugender flag ? I'd appreciate it sm, thank you for this wonderful code !
This user is not visible to guests.
This does not work, editing to include a fixed one
<div class="rounded d-inline-block" style="background-image:linear-gradient(#078e70,#078e70 14.3%,#26ceaa 14.3%,#26ceaa 28.6%,#98e8c1 28.6%,#98e8c1 42.9%,#ffffff 42.9%,#ffffff 57.2%,#7bade2 57.2%,#7bade2 71.5%,#5049cb 71.5%,#5049cb 85.8%,#3d1a78 85.8%);line-height:20px;width:26px;"> </div>
Make sure "& n b s p ;" (no spaces) is added at the end before the </div>
Made an overlay for the orientation flags to turn them into their romantic versions!
<span class="d-inline-block" style="clip-path: polygon(16% 0, 32% 6%, 51% 31%, 67% 6%, 85% 0, 100% 24%, 98% 49%, 77% 81%, 52% 100%, 25% 80%, 3% 49%, 1% 26%);background-image:linear-gradient(rgba(215,215,215,0.50),rgba(215,215,215,0.50));width:100%;">
Take the above code and put it in before the highlighted dot/nbsp, then add a second closing </span> tag after the first. If it worked, you should see something like below!
Might have to adjust background-size % if scaling up, but added:<div class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;"><div style="background:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/fd5829ed-efc1-4ca8-813f-8e31e4df26af/defqrmd-8f6b184a-7032-4f5f-9339-5feb2879e2e2.png/v1/fill/w_740,h_1079/two_spirit_feathers_by_pride_flags_defqrmd-pre.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjE0MiIsInBhdGgiOiJcL2ZcL2ZkNTgyOWVkLWVmYzEtNGNhOC04MTNmLThlMzFlNGRmMjZhZlwvZGVmcXJtZC04ZjZiMTg0YS03MDMyLTRmNWYtOTMzOS01ZmViMjg3OWUyZTIucG5nIiwid2lkdGgiOiI8PTE0NzAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.OdpcqeLxCK2GJPDzehZlA7mWoXT6gvS-U6sn-wcNdbk) no-repeat center;background-size:30%;"> </div></div>
hi hi! my girlfriend Popiinky made the questioning pride flag, if you're interested :O
<div class="rounded d-inline-block" class="mb-2 d-inline-block" style="background-image:linear-gradient(#eb732e,#eb732e 25%,#f4eb24 25%,#f4eb24 50%,#55b047 50%,#55b047 75%,#4b63ad 75%);line-height:20px;width:26px;"> </div>
<div class="rounded d-inline-block" style="background-image:linear-gradient(#eb732e,#eb732e 25%,#f4eb24 25%,#f4eb24 50%,#55b047 50%,#55b047 75%,#4b63ad 75%);line-height:20px;width:26px;"><i class="fa-solid fa-question pl-2"></i></div> ( with question mark, idk why it won't show up in the comments)
is their anyway to make all the flags sit next to each other like how their displayed?
hey, i don't know if you're still looking for this but i thought i might try my own hand at it!!! here's the code:
<!-- objectum -->
<div class="rounded d-inline-block" style="background-image:linear-gradient(90deg,#6a9fb6,#6a9fb6 20%,#d9d9d9 20%,#d9d9d9 40%,#fff 40%,#fff 60%,#fdff9b 60%,#fdff9b 80%,#b499c2 66.6%);line-height:20px;width:26px;"><div style="background:url(https://media.discordapp.net/attachments/905631900369027125/1127328978609373225/IMG_6256.png) no-repeat center;background-size:60%;"> </div></div>
I'm sorry to be this person, but can you do a straight/straight ally/straight trans flag? I have a few straight characters and I absolutely love the little icons in the profile, If not, that's completely understandable !!
Interesting, so, these flags are pretty much just hosted images, correct? (I'm attempting to recreate your process so I can make a few of my own)
You can find them here ^^. They’re ordered the same as they are on this page. You can search for a specific flag on the coding’s page by holding your CTRL key and pressing F and typing the identity of the flag you’re looking for. It’ll be below the list of names of identities and listed in the same order.
Is there a way to center align these like you would text? I've tried but it keeps breaking the codes
Ayo!! the demiromatic/demisexual flags seem to be broken as seen below, any way I can fix this? Love this code btw! ^^
Thank you so much for making these for public use! I used some on my characters profiles and was able to make a few new flags with the HTML. Much appreciated! Here are the ones I made:
Rhearomantic:
Sequencesexual:
This user is not visible to guests.
How would I add it in the same line of text ? everytime I try to do it, words go under it or in the actual image?
(For a more exact answer, feel free to inbox me the code with the flag code included.)
Try adding class="d-inline-block" to the text's code, e.g. <p class="d-inline-block"><div class="rounded d-inline-block" style="background-image:linear-gradient(#5ac7ed,#5ac7ed 20%,#efa4b1 20%,#efa4b1 40%,#fff 40%,#fff 60%,#efa4b1 60%,#efa4b1 80%,#5ac7ed 80%);line-height:20px;width:26px;"> </div>text<p>
Sure, added
<div class="rounded d-inline-block" style="background-image:linear-gradient(#4f234c,#4f234c 22.2%,#97447c 22.2%,#97447c 33.3%,#5c97f7 33.3%,#5c97f7 44.4%,#ffe7f7 44.4%,#ffe7f7 55.5%,#5c97f7 55.5%,#5c97f7 66.6%,#97447c 66.6%,#97447c 77.7%,#4f234c 77.7%);line-height:20px;width:26px;"> </div>
Do you think you could add the aegosexual flag (and maybe it’s romantic counterpart?)
Sure, added
<div class="rounded d-inline-block" style="background-image:linear-gradient(#087d15,#087d15 25%,#fff 25%,#fff 75%,#087d15 75%);line-height:20px;width:26px;"><div class="rounded" style="clip-path: polygon(0 0,0 50%,25% 50%,50% 99%,75% 50%,100% 50%,100% 0,75% 50%,25% 50%);background-image:linear-gradient(#000,#000 25%,#959595 25%,#959595 75%,#000 75%);"> </div></div>
<div class="rounded d-inline-block" style="background-image:linear-gradient(#81007f,#81007f 25%,#fff 25%,#fff 75%,#81007f 75%);line-height:20px;width:26px;"><div class="rounded" style="clip-path: polygon(0 0,0 50%,25% 50%,50% 99%,75% 50%,100% 50%,100% 0,75% 50%,25% 50%);background-image:linear-gradient(#000,#000 25%,#959595 25%,#959595 75%,#000 75%);"> </div></div>
This user is not visible to guests.
Sure, added
<div class="rounded d-inline-block" style="background:#4f7942;line-height:20px;width:26px;"><div style="background:#ffe680;clip-path:polygon(35% 0,90% 0,65% 100%,10% 100%);"><div style="background:#7644b6;clip-path:polygon(43% 0, 82% 0, 57% 100%, 18% 100%);"><div style="background:url(https://i.imgur.com/ZZk8A0l.png) no-repeat center;background-size:30%;"> </div></div></div></div>
Sure, added
<div class="rounded d-inline-block" style="background-image:linear-gradient(#623500,#623500 14.3%,#d66300 14.3%,#d66300 28.6%,#fede63 28.6%,#fede63 42.9%,#fee7b9 42.9%,#fee7b9 57.2%,#fff 57.2%,#fff 71.5%,#545454 71.5%,#545454 85.8%,#000 85.8%);line-height:20px;width:26px;"><div style="background:url(https://i.imgur.com/5MJky6y.png) no-repeat 10% 12%;background-size:30%;"> </div></div>
<div class="rounded d-inline-block" style="background-image:linear-gradient(#623500,#623500 14.3%,#d66300 14.3%,#d66300 28.6%,#fede63 28.6%,#fede63 42.9%,#fee7b9 42.9%,#fee7b9 57.2%,#fff 57.2%,#fff 71.5%,#545454 71.5%,#545454 85.8%,#000 85.8%);line-height:20px;width:26px;"> </div>
HTML Pride Flags's Comments