slashmili
Circular button with heroicon
I’m trying to create a circular button using the following code(using phoenix + tailwind)
<button class="bg-violet-700 text-slate-50 rounded-full p-3">
<span class="hero-arrow-right w-4 h-4"></span>
</button>
but for some reason the button tries to apply line-height 24px and make button oval shape. I can add leading-4 to force the line height to 16px but I’d prefer to avoid that since this a component that I want to reuse for text and icons.
I tried to isolate the html/css in tailwind playground https://play.tailwindcss.com/VTdFLa0iVb
what other options beside setting line-height do I have?
Thanks!
Marked As Solved
tcoopman
You should say that the element is not allowed to change it’s size, for example with flex:
<button type="button" class="flex text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none font-medium rounded-full text-sm p-2.5 me-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<span class="flex-grow-0 block hero-arrow-right h-4 w-4"> </span>
</button>
Also Liked
andreaseriksson
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"